Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jnhltmn

StaggerTo minus delay infinite loop

Go to solution Solved by retropunk,

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

I have this animation in CSS because I couldn't get it done in GSAP!

Of course; it's fine like the way it is now.. but I challenge you to make it in GSAP! :)

See the Pen BKBego by eelke (@eelke) on CodePen

  • Like 1
Link to comment
Share on other sites

@Jonathan ... I'm just noticing this claim feature (is it new?!). And when I started my codepen ... this wasn't claimed; I didn't mean to hijack anything. Sorry about that!

Link to comment
Share on other sites

  • Solution

You can do it like this too. No jQuery needed. :)

 

TweenMax.staggerTo( '.dot', .5, { y:-12, ease: Power1.easeInOut, yoyo:true,repeat:-1 }, 0.15 );

  • Like 4
Link to comment
Share on other sites

You can do it like this too. No jQuery needed. :)

 

TweenMax.staggerTo( '.dot', .5, { y:-12, ease: Power1.easeInOut, yoyo:true,repeat:-1 }, 0.15 );

 

That's beautiful and should have been obvious to me :) Need. More. Espresso!

Link to comment
Share on other sites

Great answers guys. 

 

I put Patrick's suggestion in a CodePen just so everyone can see how it works. 

 

http://codepen.io/GreenSock/pen/aNbomw

 

jnhltmn,

 

Welcome to the forums. Let us know if you have anymore questions. I'm confident you will find that not only will GSAP always be able to deliver the same results as CSS with much less code but you will get a huge amount of benefits when it comes to control.

 

Shaun,

We launched the "i'll answer this" feature so that people like yourself who contribute often will be able to see if someone else is already working on the topic. So far its been very helpful. It's available to anyone whith over 25 likes (which puts them in the Contributor group).

  • Like 2
Link to comment
Share on other sites

Shaun,

We launched the "i'll answer this" feature so that people like yourself who contribute often will be able to see if someone else is already working on the topic. So far its been very helpful. It's available to anyone whith over 25 likes (which puts them in the Contributor group).

 

This is very cool!

Link to comment
Share on other sites

thanks guys, for this really warm welcome to the GSAP forum! :)

my attempts were close.. but hadn't thought of combining staggerTo and yoyo.. somehow.. :)

thanks again!

  • Like 1
Link to comment
Share on other sites

  • 4 years later...

How would this effect look like in GSAP3? 🤔

Link to comment
Share on other sites

6 hours ago, jnhltmn said:

How would this effect look like in GSAP3? 🤔

Here's how I'd do it in GSAP 3 (no need for jQuery):

gsap.to(".dot", { 
  y: -12, 
  ease: "power1.inOut"
  stagger: {
    each: 0.15,
    yoyo: true,
    repeat: -1
  }
});

 

  • Like 1
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.
×