Jump to content
Search Community

staggerFrom & "-=" not working together

smallio 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

So I'm working on a client site in webflow -  http://emma-dodi-final.webflow.io/about 

 

In the about section I'm trying to get the two photos coming in while the text is animating.

 

For some reason "-=" & "+=" seem to have no effect on this snippet. Elsewhere in the site I've used them and they work perfectly. Anyone know what the deal is?

 

var tl = new TimelineMax,
    mySplitText = new SplitText("#meetEmmaText", {type:"words,chars"}), 
    chars = mySplitText.chars, //an array of all the divs that wrap each character
    emmaPhoto = $('#emmaPhoto'),
    flowerPhoto = $('#flowerPhoto');

TweenMax.set("#meetEmmaText", {perspective:400});

tl.staggerFrom(chars, 0.5, {opacity:0, scale:0, y:20, rotation: 20, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01);
tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, "-=1");
tl.staggerFrom(flowerPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, "-=1");

 

Thanks in advance :)

Link to comment
Share on other sites

It looks like you are just putting the position parameter where the stagger value should go.

the stagger methods have a stagger parameter before the position parameter

 

 

bad 

tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, "-=1");

good

//all emmaPhoto elements animate at the same time 1 second before previous animations end
tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, 0, "-=1"); 

//all emmaPhoto elements play with 0.5 second stagger between them and start 1 second before previous animations end
tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, 0.5, "-=1"); 

 

TimelineLite staggerTo() docs: https://greensock.com/docs/TimelineLite/staggerTo()

  • Like 6
Link to comment
Share on other sites

14 hours ago, Carl said:

It looks like you are just putting the position parameter where the stagger value should go.

the stagger methods have a stagger parameter before the position parameter

 

 

bad 


tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, "-=1");

good


//all emmaPhoto elements animate at the same time 1 second before previous animations end
tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, 0, "-=1"); 

//all emmaPhoto elements play with 0.5 second stagger between them and start 1 second before previous animations end
tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, 0.5, "-=1"); 

 

TimelineLite staggerTo() docs: https://greensock.com/docs/TimelineLite/staggerTo()

 

Perfect, thank you :)

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