Jump to content
Search Community

Greensock Slider

phillip_vale 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 all,

 

Trying to build a greensock slider with some code that i have put together from pens, tutorials etc.

 

I thought i was going well but i have hit a snag.

 

I wanted the first slide to have have another timeline inside of it where 3 elements animate independantly. these then all dissappear as the first slide does. The problem is when it repeats the first slide doesn't animate again. Is there a way to make it 'refresh'?

 

Thanks for any help, this is probably a bit adventurous for me but really wanted to give it a go.

 

After this i'm going to try and add the buttons.

 

Phil

See the Pen adGpwB by phillip_vale (@phillip_vale) on CodePen

Link to comment
Share on other sites

Hi,

 

Thanks for the demo there are 2 things going on here.

 

First, you weren't adding your elements timeline to slideTL1 properly. I changed the code to use:

 

slideTL1
      .add("slide1fade")
     
      .set($slide1, {
        opacity: 1
      }) // adds a label
      .add(elements.play()
 
I stripped some things down just to show that elements is now properly nested and will replay when you replay tl. http://codepen.io/GreenSock/pen/EPOyNp?editors=0010
 
The larger problem is that when you need to fix what prepNext() does. From what I gather you are shifting DOM elements around, but when your timeline repeats you aren't un-shifting back to where they should be so that the first slide is on top of the stack. I was kind of confused by how that was implemented and why you were showing slide3 before slide1 and some other things. Unfortunately I don't have time to try to figure all that out but hopefully this makes enough sense that you know where to focus your efforts now. 
  • Like 3
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...