Jump to content
Search Community

GSAP animation for image sequence

Viz test
Moderator Tag

Recommended Posts

Hi All,

 

I'm trying to achieve a image sequence animation where the images are actually over each other but they show only one at a time. The animation between switching the image should be smooth. I have done this via the onStart and onComplete methods of StaggerTo but that seems like not a efficient use of GSAP library. Also it means I have to repeat the method for each image (which can be resolved with a loop but I was hoping to use stagger methods more efficiently. Can this be done better?

Please see code pen here  for demo.

See the Pen dyovwrW by vsaini603 (@vsaini603) on CodePen

Link to comment
Share on other sites

Hey Viz and welcome to the GreenSock forums!

 

Yes, there are much better ways to structure this in GSAP :) Some notes:

  • There is no reason in using a stagger if there is only one target. Staggers only work with multiple elements. See the stagger docs page for more information.
  • Tweens added to a timeline automatically occur after the previous ones, so there's no reason to use onStart/onComplete. 
  • We highly recommend using GSAP's .set() method instead of setting properties manually. It's easier to do so!
  • Since your images are layered there's not much point in fading out the previous image - just fade in the image that's on top.
  • If you're using ScrollMagic (which is not a GreenSock product by the way - we don't really recommend using it), the default behavior is to reverse through the timeline if people scroll up so you don't have to do anything in an onReverseComplete.
  • We also highly recommend using GSAP 3's formatting.

Altogether, it's super simple!

var tl = gsap.timeline()
.to("#hero-1, #hero-2, #hero-3", {opacity: 1, stagger: 1, ease: "none"});

The timeline part isn't even necessary if this is all you're doing. You could just do 

var tl = gsap.to("#hero-1, #hero-2, #hero-3", {opacity: 1, stagger: 1, ease: "none"});

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

This is absolutely perfect!  And cheers for sharing the documentation along with it. 

I have a small issue with this though, while I scroll, the images transition from opacity - 0 to opacity -1. But somewhere between that there is a intermediate state where the opacity is between those. At this point in time, two images are visible (see the image attached) and that is what I was trying to avoid with my code. 

 

Capture.JPG

Link to comment
Share on other sites

Hey @mikel,

 

Thank you for your reply. But what I am looking for is rather than changing the duration of the complete animation, if I can change the duraiton of each transition. Which means that the opacity change from 0 to 1 without any intermediate value.

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