Jump to content

iLuvGreenSock

Members
  • Content Count

    16
  • Joined

  • Last visited

Community Reputation

5 Newbie

About iLuvGreenSock

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Yes all works now. Thank you very much @GreenSock. Awesome library and best community ever!
  2. Yup, it doesn't work. I tried using clearProps like this below. Paused tweens doesn't reinit. Barba.Dispatcher.on('transitionCompleted', function(currentStatus, prevStatus) { for (var i = 0; i < element.length; i++) { element[i].anim = TweenLite.to(element[i], {clearProps:"all"}); } });
  3. Sorry if I wasn't clear. I'm also in the same situation of using barbajs and would like to know of a way to reinit my tweens. I understand from previous correspondence in this thread to use ClearProps or TweenMax.set is the way to go. For example: TweenLite.set(element, {clearProps: "all"}); So now if I want to reinit paused tweens inside a for loop, how would that work out to be? for (var i = 0; i < element.length; i++) { element[i].anim = TweenLite.to(element[i], 1, { y: 100, ease:Power1.easeIn, paused: true }); } Thanks so much! Appreciate your time and help.
  4. Calling for superheroes.. anyone?
  5. for (var i = 0; i < element.length; i++) { element[i].anim = TweenLite.to(element[i], 1, { y: 100, ease:Power1.easeIn, paused: true }); } Something like this?
  6. Hi @Victor Work, How would ClearProps or TweenMax.set work for a paused tween inside a for loop? Thanks for your help.
  7. It seems that this css rule is the main culprit in my code. All animation is silky smooth after removing this. Hope this will help anyone encountering the same issue. * { transition(all .3s ease-in-out); } So sorry for wasting everybody's bandwidth. 😁
  8. Thanks to all the superheroes @Sahil, @mikel, @GreenSock, @Carl for all your inputs/advise. I've actually used a cross-browser plugin https://www.npmjs.com/package/jquery-mousewheel on my actual code to manage the mousewheel event since it (the one on my Codepen demo) doesn't work on webkit browsers. This JS plugin also changed GreenSock JS to v1.18.0 instead. Just mentioning though I know this won't help you guys in understand the core issue.
  9. Ok, do you know if it's possible to delay the onComplete call? Or add some delay time at the end of my tween before the onComplete call? This is already a reduced test case on Codepen.io. What I'm trying to understand is why the same code words in Codepen but not in my actual code. Thank you nonetheless @GreenSock, appreciate it. I'm sorry if this isn't the right place to post my question.
  10. Thank you for your reply. @Carl. I'm sorry it wasn't clear. Here's a demo. Works perfectly ok on Codepen.io but on actual code, the onComplete fires before tween ends. Hope this help you to point me in the right direction. Thanks a lot in advance to you awesome guys.
  11. Thank you @Sahil, I appreciate your time to reply. Sorry, let me correct myself, what I observe is onComplete gets fire at the last split second when the tween ends (before it reaches yPercent: -100), not after. transform: translate(0%, -100%) matrix(1, 0, 0, 1, 0, 0); The tween for each elem will be played when it detects the delta in the mousewheel event. So it's indeed very strange as I did not use any stagger tween.
  12. Thanks @Sahil for your swift reply! What i'm puzzled is that on Codepen, it works perfectly well. However on my actual code, onComplete function doesn't wait for the tween to be fully complete before it gets called. In fact, onComplete fires just when the tween is about to complete. I've also increased the tween duration to 3s and onComplete gets fired 3s while tween started slowly and ends another 3s later.
  13. Hi guys, I've a tween for all my elements in a for loop and it works as expected in Codepen. The onComplete function call basically is to change a var to back to "true" when the animation ends. However onComplete gets fire just before the tween ends when this is on my actual code. I'm not sure why this is happening. Hoping someone can advise. Thank you so much! for (var i = 0; i < elem.length; i++) { elem[i].myAnimation = TweenLite.to(elem[i], 1, { yPercent: -100, ease: Power1.easeInOut, onComplete: onAnimationCompleteEnd, onReverseComplete: onAnimationCompleteEnd, paused: true }); }
  14. @OSUblake you're my superhero! You're provided exactly what I'm looking for. Not only does GSAP rocks, the community is totally awesome!
  15. Wow, thanks for your very swift reply and detailed explanation! I really appreciate your help! Don't I need to declare this element mySuperAwesomeAnimation? Any docs that I can read this up?