Jump to content
Search Community

StaggerFromTo animation question

Teun87 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

var hours = ["#hours-1", "#hours-2", "#hours-3", "#hours-4", "#hours-5", "#hours-6", "#hours-7"];
TweenMax.staggerTo(charges, .3, {opacity:0}, 0.3);
TweenMax.staggerFromTo(hours, 1, {visibility:'visible'}, {visibility:'hidden'}, 0.3);

Please check the snippet above. My question is simple: Now every item with id hour-XX immediately is visible, although I did set a visibility: hidden in the CSS by default. How can I set the hours to only be visible for .3s via the staggerFromTo function and afterwards be hidden again?

 

Thanks,

Teun

Link to comment
Share on other sites

var hours = ["#hours-1", "#hours-2", "#hours-3", "#hours-4", "#hours-5", "#hours-6", "#hours-7"];
TweenMax.staggerTo(charges, .3, {opacity:0}, 0.3);
TweenMax.staggerFromTo(hours, 1, {visibility:'visible'}, {visibility:'hidden', immediateRender: false}, 0.3);

 

Any tween is rendered immediately, whether it is a combination of set + to tween, from or fromTo tween. You can avoid that by setting immediateRender to false.

 

See the Pen aqZoPW by Sahil89 (@Sahil89) on CodePen

 

It is just unexpected behavior but makes a lot of sense if you check following video.

 

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...