Susan

Thank you @Sahil and @Carl .

I was trying to experiment GS playback functions with this tutorial - https://ihatetomatoes.net/module-1/g101-controlling-timeline-playback-0747/. However, this pause function doesn't pause. tl.pause(); And this play function doesn't play. $('#bPlay').on('click',function(){ tl.play(); }) Please let me know the errors that I have rendered, thank you!

Hi @Sahil I have created another pen with the repeat value, thank you! Happy weekend!

@Sahil I have replaced the targets with unique vars, please take a look and advise if you have any comments. Thanks!

Thank you @Sahil and @OSUblake for the kind directions, I will digest and experiment further, thank you!

@Sahil Thank you for the reference, I have a better understanding of how to run the animations. Would you mind to have a look of my 2nd test pen? Kindly advise, if you have any comments, thank you!

I am having problem to understand how to bind multiple animations into one variable which is in nest timelines. What I would like to achieve is a looping variables like this codepen: But with multiple animations for one/first variable (box1Timeline) like this, mentioned by @OSUblake Kindly assist, thank you!

@OSUblake The previous code looks great on modern browser, thank you for providing the new codes which are compatible with different versions of browser.

This is very helpful, thanks @Sahil

Thanks for the kind help! 'Infinite repeating animation' means I would like to create a repeating multiple objects - #left-1 to #planet to #left-1. Which means when #left-1 has completed 2 times of animation, then #planet will take place (eg also 2 times of animation) and followed by #left-1 and so on (followed by #planet). How can I achieve such repeating animation sequence with GreenSock JS? Thank you!

@OSUblake After some further experiments, here are some queries: 1. I have changed the repeating number from infinite to 2 times but it is still animating unceasingly. Am I missing something here? var tl = new TimelineMax({ repeat: 2}) 2. How can I create a layer to layer infinite repeating animation (from left-1.png to planet.jpg to left-1.png) with the following code? I have tried to check from the CSSPlugin documentation but not found. function animate(target, skewType) { var tl = new TimelineMax({ repeat: 2}) .to(target, 3, { skewType, skewX: 90, repeat: 1, yoyo: true }, "+=0.2") .to(target, 3, { skewType, skewX: -45, repeat: 1, yoyo: true }) .to(target, 3, { skewType, skewY: 90, repeat: 1, yoyo: true }, "+=0.2") .to(target, 3, { skewType, skewY: -45, repeat: 1, yoyo: true }) } Furthermore, I have added this line to execute a delayed animation for planet.jpg but it breaks the whole JS coding. TweenMax.fromTo("#left-1", 30, {opacity: 0}, {opacity: 1} ); Kindly advise, thank you very much!

@OSUblake This is something I have been searching for high and low, zillion thanks for this!!!

Thank you so much for the enlightenment.

Thanks @Sahil for the kind explanation, I really appreciate it, thank you!

Hi GreenSock, I have removed the CSS transition code transition: all 0.5s ease 0s; and edited the TweenMax code TweenMax.fromTo("#left-1", 20, {opacity: 0.3, skewY: '30deg', rotation: 80, ease: Power0.easeIn} , {opacity: 1, skewY: '360deg', rotation: -10, ease: Power0.easeNone, repeat:-1} ); Is this correct? And how can I apply a smoother background transition? I have tried the GreenSock's easing alternatives but the background still doesn't repeat/transit smoothly. Please help further, thank you!

Thank you @GreenSock ! No wonder the background animation appears shaky occasionally. May I know how I can incorporate the following code with GSAP, so it will not cause conflicts? transition: all 0.5s ease 0s;

Hi GreenSock, First of all, I would like to thank you for your amazing JS library! It allows me to create a pretty web animation in a short time, thank you! Here's the progress - https://z1.golddigitaldesign.com/ and enclosed is a screenshot which is showing the skewed background image is overflowed. CSS codes: #left-1-wrap { position: relative; overflow: hidden; } #left-1 { position: relative; top: 0; right: 0; bottom: 0; left: 0; -ms-transform: skewY(-80deg); -webkit-transform: skewY(-80deg); transform: skewY(-80deg); transition: all 0.5s ease 0s; } TweenMax codes: TweenMax.to("#left-1", 20, {skewY: '360deg', rotation: -180, ease: Power0.easeOut, repeat:-1} ); Is there anything that I can do to prevent the overflowing over the Y axis? Or is a normal case and no further adjustments is needed? Thank you!

Thank you @Sahil for the kind information, happy weekend!

Hi GreenSock, Thank you so much for pointing out my negligence, I have missed out he opacity value! Another question, TweenMax allows id to have no # beside the name? As you can see below, I did not include the # but the id is rendered together with the code. TweenMax.to(light, 2.5, { opacity: 0.5, ease: Power0.easeOut, y: -50, repeat: -1 }); Kindly advise, thank you.

Hi GreenSock, Yes, I have commented-out the "top" code, because I would like to try the Linear.easeNone animation but the #light isn't displaying and animating. Please assist, thank you.

What did I miss out here, why the easing function isn't working? Thank you.

That sounds super awesome! Thank you @Sahil

Hi GSAP, Is it possible to integrate GSAP with an AI chatbot to achieve a text-replying animation effect? Eg while the chatbot replies in text, a radar animation will follow along. Thanks, Susan

@Jonathan I see, so shy, I'm a newbie on this. Thank you so much for your kind pointer!

I am trying to experiment GSAP on Codepen but it doesn't work. What did I left out? Thanks!