[Adding a mosaic effect to body background]

Hello,

 

Coming back to GSAP after some months in 'another universe'.
Could it be possible to animate a body background image without disturbing the other elements in this body ?
The intended animation is a mosaic effect.

Thanks for an answer and if this is something we can do thanks for a starting point.

 

[Is greensock useful for an auto-deploy menu]

Hello,

 

The design of my site include a floating menu built with bootstrap.

 

On landing page which is a kind of one page site with 8 areas, the menu stays static on the bottom of screen, so when the content scrolls, part of this content is hidden by the fixed menu.

I would appreciate to be able to reduce its width from all the width to a round image on its left. Clicking the image would deploy horizontally the menu bar on/off.

 

On others pages it behaves more as a fixed top bootstrap menu but with a  height which eats part of the page. Here I would appreciate to have it automatically reducing it height when the mouse is not over its area. But I want to keep all this cool enough to avoid trying to click on already reduced part of it.

 

I hope my explanations are clear.

 

Thanks for a direction to start.

[Pb in rotation of opening doors]

Now it seems so obvious, thank you.

[Pb in rotation of opening doors]

Hello,

 

 

I want to offer an effect of opening pannel just as in this codepen

 

Please note that I can't attach the images normally figuring the doors so I used red background.

 

Problem is the rotation is not keeping the normal aspect ratio of the 2 openning panels, they seem to be growing when opening.
Is there a way to improve this.

 

 

Moreover, I have another option wich would be to open sliding (not rotating) each element respectivelly to left and right. How to do it ?

 

Thanks you for help.

 

CS

See the Pen NxqaJX by anon (@anon) on CodePen

[Pausing animation when cursor is over an element]

Many thanks, perfect again.

CS

[Pausing animation when cursor is over an element]

Hello,

 

I am using a animation based on the model of Firefly Particules by Diaco

 

I localized all my moving elements inside a div and I am looking for a way to stop the animation when the mouse come over the div, restarting as soon as the cursor leaves the rectangle ?

 

Thanks for suggestion

 

CS

See the Pen gbwzoM by MAW (@MAW) on CodePen

[Best way to simulate door opening on a video behind]

Hello,

 

I am looking for an example to animate something as this

 

https://drive.google.com/open?id=0Bzx7LDFcZwmMYnhabVY0ZjRwc2M

​

I would like to have the 2 parts of the image open and let appear a video which has started when the 'doors' have oppened by 50%.
 

My question is that the 2 images should not only open but also disappear, as if they enter behind the display. With which API could I obtain this effect ?

 

Thanks for help

CS

[How to rotate smoothly an <img>]

Ok thanks.
I think it will be ok with those reset features, I will adapt to my case.

[How to rotate smoothly an <img>]

And look the positioning has the same pb, if I add the red border and you switch your screen (Chrome) frome full size to reduced, the img no more goes inside the containerImg

 

See the Pen JYRRYp by anon (@anon) on CodePen

[How to rotate smoothly an <img>]

Than you for fast answer.

 

Looks nice but I only want to have one tween each time screen is resized, not a permanent one.
I tried setting repeat:0 but it no more restarts when resizing.

 

CS

[How to rotate smoothly an <img>]

Hi Diaco,

 

I made some progress on my side.

I don't know how JavaScript Media Queries could help me ? It seems I am near a solution simply using %.

 

But I get some problems:

- $(window).resize does not works ideally. After resizing the browser window, especially when resizing using a move of the windows vertical side to widen or reduce, sometimes the tween get lost. It starts but stops without completing the action. May be am I missing some reset function somewhere ? Data used by the Tween seems corrupted ?

- After resizing the screen, when it works Ok, the img stops on a position near what I am asking but not totally (???). If I press F5 to refresh without changing the screen size, the sequence is replayed but the image arrives in a different place. Not far from the previous, but different ???

 

Here is the corresponding codepen 

See the Pen ojzLjB by anon (@anon) on CodePen

 

EDIT: I have added a red border to containerImg and it shows the pb.

 

Thanks for help again.

CS

[How to rotate smoothly an <img>]

Hello Diaco,

Could you help a last time as I am facing a challenged I was not expecting: all my layout is bootstrap built using container-fluid.

And in this theme, ht image has to adopt a size proportional to the display: positioned at a % of height and width with a size which vary depending the screen size.

(for small size (< 720px)I dont want to play the animation but for larger screens (992, 1200) I need it. Could I use % where I have been using fixed values ?

 

Thanks again for help.

CS

[How to rotate smoothly an <img>]

Perfect, thanks.

[How to rotate smoothly an <img>]

Ok, I made this

See the Pen avNMpW by anon (@anon) on CodePen

 

What is missing and I can't find how to do it:

 

1) nice transition when on the end of the 360° loop

2) reduce speed

3) Move from a point on left or right to reach center and in the same time grow from 1 point to its full size.

 

Any help welcome.

 

PS: how to stop the codepen ?

 

CS

[How to rotate smoothly an <img>]

Hi,

 

Being new to GreenSock, I want to move a circular <IMG> from some small point (coming from the background effect) to its full size centered in the page. I also want the image to be rotating on itself. But I can't reach a smooth rotating effect.

I have been tweaking an existing example and trying something as

 

<body>

    <div id="container">

        <img id='svg' class="R-T" src="img/sigle-1920.png">

    </div>

    <script type="text/javascript" src="js/greensock/TweenMax.js"></script>

    <script type="text/javascript">

        TweenLite.set(container, { perspective: 300 });

        TweenMax.staggerTo('.R-T', 1, { rotationX: 360, repeat: 20, ease: Linear.easeNone, delay: -1 }, 1);

    </script>

</body>

 

The rotation is very fast, too much fast. Is there a way to slow it down ? Then to move my image from one point with a small size and grow it while it keeps rotating an inflating to its final size and position ?

 

Thanks for help.

 

CS

[Is there a way to obtain same rendering as in this velocity demo]

; Seems exactly what I was looking for.Thanks

[Is there a way to obtain same rendering as in this velocity demo]