Insert responsive animations in bootstrap 3 page?

[slog70]

Hi all,

I need to insert an animate cc 2017 animation inside a bootstrap 3 page.

I put the animation inside a fluid container that should fill the whole browser viewport.

This work in a basic page (not bootstrap) but once I put the animation inside a bootstrap page I get the animation in the container a little bigger than it, so, the browser horizontal scroll bar appears (but it should't).

Has anyone narrowed down this problem?

TIA

tony

[pziecina]

You may find that you need to zero the margin and padding values for the containing element -

yourContainerName {

margin: 0;

padding: 0;

}

You should also check that the cc animate animation, was created and exported using % values.

[Nancy OShea]

Screenshots don't tell us anything.  Can you upload your work in progress to a remote server and post the URL?  That way, we can see what you see in a browser as well as the underlying code. 

Nancy

[slog70]

You're right Nancy: click here to see the problem.

Horizontal scrollbars should not appear.

TIA

[osgood_]

Horizontal scrollbars are being caused by settting the <div> at a specific width of 1920px in 3 places in the code below:

<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1920px; height:647px">

<canvas id="canvas" width="1920" height="647" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>

<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1920px; height:647px; position: absolute; left: 0px; top: 0px; display: block;">

</div>

</div>

[slog70]

This is the original code output from Animate CC 2017.

I've set the stage to be responsive in both width and height and this is the resulting code.

But even if you remove the width/height or set width to 100% in the code the result is the same: scrollbars.

Has anyone tried to insert any responsive animation in a bootstrap 3.5 page succesfully?

Tony

[osgood_]

Relooking at your code, the scroll bars are being caused by the hover image code:

<div class="row visible-lg visible-md">

<div class="col-md-12">

<div class="prodotto-homepage">

<img src="http://www.slogansrl.it/rowenta-air-force-360-feb2017-v3/images/prodotto-air-force-360.png" class="img-responsive center-block">

</div>

</div>

</div>

You need an alternative way to include that using relative/absolute positioning.

I dont do Bootstrap as its a bag of crap and I'm not prepared to waste time diving into its ugly css and coding, otherwise I could help you out quite simply. Maybe one of the other regular contributors who use Bootsrtap can come to your rescue, now I've isolated the issue.

[slog70]

Hi osgood,

thanks for your help.

But I tried to remove the whole div containing the hover image but the animation continue to push to the right and allow for the scrollbars to appear. .

I removed the width and height from the code but the problem is still here.

tony

[osgood_]

Its both sections of code that are giving you the issue - the image of the 'cleaner' superimposed over the main image PLUS the animation block of code.

If you remove both blocks of code the scrolling issue goes away, so that's where you need to concentrate your efforts.

In terms of getting your cleaner image super-imposed  correctly add the below <div> code block 'cleaner'  DIRECTLY before your main image, like below.

<div class="cleaner">

<img src="http://www.slogansrl.it/rowenta-air-force-360-feb2017-v3/images/prodotto-air-force-360.png" style="width: 100%">

</div>

<!-- end cleaner -->

<img src="http://www.slogansrl.it/rowenta-air-force-360-feb2017-v3/images/header.jpg" class="img-responsive center-block">

Then add position: relative; to the <div> which containers the 2 images:

<div class="col-md-12 no-padding" style="position: relative;">

Then add the css styling for the cleaner image <div> to your custom css stylesheet:

.cleaner {

position: absolute;

top: 50px;

right: 50px;

z-index:1;

width: 19%;

}

@media screen and (max-width: 900px) {

.cleaner {

display: none;

}

}

As for the animation block of code that just looks wrong to declare a specific width of 1920px inline as that is always going to cause a horizontal scrollbar when the browser window width is below 1920px wide. But then if I look at the javascript for the animation that looks like it could be resizing the container reponsively, maybe.

Have you tried Googling 'responsive animation in Animate CC' to see if there is any guidance of how to export and include it in a webpage?