Jump to content
GreenSock

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

Cycle images using the new GSAP version

Recommended Posts

I'd like to rewrite my image cycle animation using GSAP's latest code. It's cleaner, plus I want to attach it to the new ScrollTrigger, and fire the animation when it reaches a certain point on screen, and pause when its not in the viewport.

 

However, I'm having a difficult time getting it to work. I've found examples using the deprecated cycler, and others using some nifty staggers. I got close with my code, but I just can't get rid of the fade (I'd like the active image to just appear without a transition, and have it stay visible for a fraction of a second).

 

Bonus kudos if someone can help the cycle accelerate until a maximum.  @swampthang and @OSUblake both seemed to get this to work by adding a timeScale fromTo tween on the timeline itself 

See the Pen dpqyzO by swampthang (@swampthang) on CodePen

 and 

See the Pen epLjrG?editors=0010 by osublake (@osublake) on CodePen

. But, is that possible to do if the animation is going to be triggered by the ScrollTrigger?

See the Pen eYZLqqX?editors=1111 by sashaikevich (@sashaikevich) on CodePen

Link to post
Share on other sites

Hey sashaikevich. I recommend using a loop and .set() calls instead since you want things to switch out immediately. Here's how I'd set it up:

See the Pen gOrBpYW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

As for attaching it to scroll, it's not clear how you want it to work on scroll. Do you want the animation to be scrubbed through? Or it start once a certain position is reached and continue playing? If so should it reset when coming back in the viewport? Or just continue playing? How does the slow start animation fit in? ScrollTrigger can do all of that but the scroll trigger values vary depending on the effect that you want of course :) 

  • Thanks 1
Link to post
Share on other sites

Legend! Thanks!

Yeah, I'm going to start the play when its scrolled into view, and pause it when its out of view.

I've ScrollTrigger.create...ed a listener, and am using callbacks with my current method:

onEnter: cycleRevisions,
onLeave: pauseRevisions,
onEnterBack: cycleRevisions,
onLeaveBack: pauseRevisions,

With yours, can I just add the animation property and populate it with the timeline variable? (along with the toggleActions)

animation: revisionTL,
toggleActions: "play pause resume pause"

 

Link to post
Share on other sites
2 minutes ago, sashaikevich said:

can I just add the animation property and populate it with the timeline variable?

Yep! That won't have any speeding up or slowing down though. Including speeding up is a little more complex and again depends on exactly how you would want that to work.

Link to post
Share on other sites

I'm happy to use it even without speeding up, that would have been just a cherry on top. 

The speeding up would happen only on the very first play, so that the site visitor wouldn't be hit with an epilepsy-inducing flashing animation. I wanted the animation to ease into it on first play, and then continue at a constant speed (even after restarting at onEnterBack).

Link to post
Share on other sites

As an aside, I see you use some clever techniques, like converting the objects to an array and saving them in a variable, instead of doing them on the fly with the built in gsap selector, and setting time to 0.0001 to ensure first frame loads. I recall a post about optimization / best practices on gsap forums or blogs, or somewhere... but I can't find it again. I'd like to refactor my code with best practices once done, rather than have things holding by duct tape. Do you know the page I'm talking about?

 

Link to post
Share on other sites
2 hours ago, sashaikevich said:

Do you know the page I'm talking about?

Maybe my article about animating efficiently?

 

2 hours ago, sashaikevich said:

converting the objects to an array and saving them in a variable, instead of doing them on the fly with the built in gsap selector

It's effectively the same in this case. Just a habit I have.

 

2 hours ago, sashaikevich said:

setting time to 0.0001 to ensure first frame loads

That's just required to get the first frame to render, not an optimization technique :) 

 

Version started and stopped by ScrollTrigger: 

See the Pen yLORJPJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you want to do the slow start then it'd probably be better to not use the animation property but instead start/stop things using the onEnter, onLeave, onEnterBack, and onLeaveBack callbacks.

  • Thanks 1
Link to post
Share on other sites

I'm not 100% sure, but I think there might be a way applying fromTo on the timeScale. I'll have to play around with it some. Thank you very much for your help. And for the animating efficiently writeup. I don't think that's the one I had in mind, but yours might be better! Thanks again!

Link to post
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.

×