Help with beginner tweenLite user

[sick911 1 Likes (Newbie)]

Hi,

 

I have been trying to create an image carousel for a website, I found Greensock out of a recommendation because jQuery animations aren't as fluid, I looked at the beginner tutorials from Petr and also followed a tutorial he has on youtube, I have been having problems making the images rotate as shown in my codepen.

 

Can someone help me please?

See the Pen pyPLvj by alvaro911 (@alvaro911) on CodePen

[Ihatetomatoes 147 Likes (Specialist)]

Hi Alvaro, great to see you experimenting with GSAP.

 

Which of my tutorials have you followed?

 

I've only quickly looked at your code and see a few errors:

function goToTile(sildeIn, slideOut)

// should be slideIn, also you have tl twice in that function
// also I would include var in front of slideIn 

var slideIn = ...

My suspicion is that the way you are passing the slideIn into the goToTile function is returning wrong object on a second click.

 

Try to console log this and see if it returns the right object all the time:

slideIn = slideOut.parent().children('.view').eq(index);

Sorry I couldn't help more atm, but I hope it steers you into the right direction.

[Rodrigo 2,662 Likes (Superhero)]

Hi Alvaro,

 

Normally I don't consider a good idea to use a timeline class for a carousel/slider. I find much simpler using a Tween class for every slide, but that's just me.

 

Here's a very simple example of a content slider:

 

See the Pen CeDkc by rhernando (@rhernando) on CodePen

 

Also here's a slider crafted by Jonathan using a timeline class:

 

See the Pen qxsfc?editors=0010 by jonathan (@jonathan) on CodePen

[sick911 1 Likes (Newbie)]

Thank yo very much I was able to fix the problem, I'm really considering buying the advanced class for greensock, is there a syllabus that I can check?

 

Once again thank you.

[Ihatetomatoes 147 Likes (Specialist)]

Hi Alvaro, which syllabus are you referring to?

 

GSAP WorkBook or GreenSock Workshop?

 

I've update the GreenSock Workshop page with a detailed table of content.