Trying to animate a carousel using gsap 3 timeline

[daniel.mt]

Hi everyone,

 

I'm really newbie with gsap and I'm more than sure that I did some awful mistakes. Sorry in Advance if this was already asked / the answer is in documentation but I really couldn't find it and I managed to spend 8h trying to fix this ( deleting and remade-ing ) .

 

So for short I found some really great examples and this one caught my eye: 

 

This one more precisely: 

See the Pen YrXdGZ by osublake (@osublake) on CodePen

 -- 

I started to analyse it and I tried initially to migrate from gsap 2 to gsap 3 but unfortunately I managed to fail miserably. Afterwards I tried to recreate it from scratch to understand how it works where I failed but still ... I managed to get stuck. 

 

The main problem: I don't understand why in the demo this line:

 

var animation = new TimelineMax({ repeat: -1, paused: true }) .add(baseTl.tweenFromTo(1, 2))

 

mainly starts the timeline in a great position and in my situation:

 

_.animation = gsap.timeline({repeat: -1, paused: true}).add(_.timeline.tweenFromTo(1, 2));

 

it just stays in place.

 

I also tried to reproduce Blake's example in localhost and it does the same thing ( after changing everything to gsap.timeline and gsap.to ). I'm thinking that I miss something or it's a bad thing on putting the timeline in 'this' object. 

 

In the end I just want to properly select the center object/objects and increase the scale . And I'm trying to implement a progressive scaling on each item like: 

 

0.6-0.8-1-0.8-0.6 

 

 

See the Pen QWyoryq by vesemir (@vesemir) on CodePen

[ZachSaucier]

Hey vesemir and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Business Green member!

 

I showed how to convert this pen (with some modifications for that person that asked about it) to GSAP 3 in this pen:

 

I'm not really understanding your goal. Hopefully the above thread helps, but if you still have questions please let us know and try to clearly describe the issue. Then we'll be happy to help!

[daniel.mt]

Hey Zach. Thanks for responding. 

 

Yhep. It's perfect. Didn't find this post. Thank you.

My final goal is to achieve a similar affect but horizontally ( including changing other divs in sync with the main one and this is a bonus for me as you already solved it ) .

 

Although I don't quite understand how progress affects each item and how you make that centred item scaled. 

 

I'll try to add some breakpoints, go through documentation thoroughly and maybe it will click at some point. 

 

Thanks a lot for your help and response.