Jump to content
Search Community

Trigger multiple TweenMax functions when in viewport

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

Hi everyone,


I did create the following code and it is working. Now I want to 'bundle' all this code and trigger it when the SVG is in the viewport. I'm looking for a really simple solution and hope I don't have to use a library like ScrollMagic (I've already tried, but can't get it to work).


The code is:

var charges = ["#charge-7", "#charge-6", "#charge-5", "#charge-4", "#charge-3", "#charge-2", "#charge-1"];
var hours = ["#hours-1", "#hours-2", "#hours-3", "#hours-4", "#hours-5", "#hours-6"];
TweenMax.staggerTo(charges, .3, {opacity:0}, 0.3);
TweenMax.to("#hours-indicator", .3, {visibility: 'visible'});
TweenMax.staggerFrom(hours, .3, {visibility:'visible', immediateRender:false}, 0.3);
TweenMax.to("#hours-7", .3, {visibility: 'visible', delay: 1.8});
TweenMax.to("#clock-hands-minutes", 1.8, {rotation:2520, transformOrigin:'bottom center', ease:  Power0.easeNone});
TweenMax.to("#clock-hands-hours", 1.8, {rotation:180, transformOrigin:'bottom left', ease: Power0.easeNone});

Some animations need to play in sync. Problem with ScrollMagic is that it looks I can only add a timeline or single TweenMax in the ScrollMagic setTween-function, which is causing the different animations to only play after each other instead of simultaneously.


I've looked here on the forum but couldn't find an similar case.


Help or a small snippet would be welcome :) THANKS!


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...