Susan

Members
  • Content count

    28
  • Joined

  • Last visited

Community Reputation

7 Newbie

About Susan

  • Rank
    Member
  1. GS Playback Functions

    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!
  2. Hi @Sahil I have created another pen with the repeat value, thank you! Happy weekend!
  3. @Sahil I have replaced the targets with unique vars, please take a look and advise if you have any comments. Thanks!
  4. Thank you @Sahil and @OSUblake for the kind directions, I will digest and experiment further, thank you!
  5. @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!
  6. 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!
  7. Overflow: Hidden

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

    This is very helpful, thanks @Sahil
  9. Overflow: Hidden

    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!
  10. Overflow: Hidden

    @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!
  11. Overflow: Hidden

    @OSUblake This is something I have been searching for high and low, zillion thanks for this!!!
  12. Overflow: Hidden

    Thank you so much for the enlightenment.
  13. Overflow: Hidden

    Thanks @Sahil for the kind explanation, I really appreciate it, thank you!
  14. Overflow: Hidden

    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!
  15. Overflow: Hidden

    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;