Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Carl last won the day on April 4 2019

Carl had the most liked content!

Carl

Moderators
  • Content Count

    9,293
  • Joined

  • Last visited

  • Days Won

    532

Everything posted by Carl

  1. I just downloaded your file and it worked perfectly for me. thanks for providing it. I'm guessing you may have an older version of Animate. There was a problem where scripts on frame 1 could not access movieclip children. You had to wait a frame or wait for some frame_rendered event or something dumb. In Animate 20 it works fine. It was one of my biggest issues with Animate.
  2. GreenSock has utility function called wrap() which allows you to wrap (or cycle) through array values. This means you don't have to increment and reset your curColor value. It can keep going up and up and gsap will pull the proper color from the array. gsap.to("#morph", { backgroundColor: function() { return gsap.utils.wrap(colorArray, curColor++) }, duration: 0.5, repeatDelay: 0.1, repeat: 100, repeatRefresh:true }); https://codepen.io/snorkltv/pen/VwaJJBN?editors=0010 I have a free wrap() tutorial on my blog with video and dem
  3. I'd happy to help with this. Thanks for the demo. There were a few issues with your demo. The biggest was that you had a function on an onComplete but an animation will never complete with repeat set to -1 (infinite). The trick is to use the onRepeat callback In order for the backgroundColor value to get re-applied it needs to be a function-based value AND you need repeatRefresh to be set to true. repeatRefresh means that values will get invalidated on repeat and function-based values will be re-evaluated. here are my modifications to your demo h
  4. Carl

    Pause timiline

    this seems to work https://codepen.io/snorkltv/pen/mdPaggN?editors=1111
  5. Carl

    Pause timiline

    paused() is intended to be used outside of a timeline, not in the middle of it. paused() does not get executed while the timeline is running. Again, my suggestion is to use call() to call a function that evaluates the value of i. https://greensock.com/docs/v3/GSAP/Timeline/call() based on the value of i you can pause the timeline or have it keep playing.
  6. Carl

    Pause timiline

    not exactly. I was thinking you wanted to add the pause when you created the timeline so I would have said if(i){ tl.addPause() } if you want to check to see if a pause is needed while the timeline is running, then I would probably just use call(), but if your way is working, then it should be ok. I'd have to test it myself, which I can't do without a demo.
  7. Carl

    Pause timiline

    Oh and I just remembered I have a blog post showing the most common follow-up question: "How do I pause for a specific amount of time". It's from one of my premium GSAP courses but free below: https://www.snorkl.tv/pause-a-greensock-timeline-for-a-specific-amount-of-time/
  8. Carl

    Pause timiline

    When building the timeline you can test to see if i is true and then use addPause() if yes. See the docs for addPause()
  9. thanks for posting the video, Craig. I actually needed a refresher myself.
  10. Carl

    What is this called?

    Hi @FuzzCod I have an in-depth, free video tutorial on smooth-scrolling and ScrollTrigger's scrollerProxy() that should help you: https://www.snorkl.tv/scrolltrigger-smooth-scroll/
  11. Great idea using GSDevTools! It shows the master is still playing when you call addPause() on the child. the master knows it has 1 more second of animation to play in its child but pausing the child doesn't notify the parent. (pretty sure this is all by design and working correctly) here's a fork with GSDevTools enabled. https://codepen.io/snorkltv/pen/PoNjEEj smoothChildTiming would go on the master... I tried adding it. I don't think it helps in this context. @greensock or @ZachSaucier or someone else would have to advise on a solution.
  12. First it's important to note that things work if you don't nest boxesTL in master. Once you nest, the child timeline gets rendered dependent on where the parent timeline's playhead is. When your delayedCall() runs, the master timeline is already 1 second ahead into the future which forces boxexTL's playhead one second ahead into the future, thus skipping the part where it animates the blue square. Please see this excerpt from the timeline docs https://greensock.com/docs/v3/GSAP/Timeline When a timeline renders at a particular time, it loops through its
  13. HI Joe, I'm assuming you are using the HTML5 output for ads or something. I have found the animate canvas performance is often worse than what I would get when moving DOM elements around. If I create loops of a hundred or so things moving around I often hit some jank which you would never see with pixi.js or other canvas libs. filters like dropshadow will kill performance. also animate really suffers if you have a large stage / canvas i also found nested symbols to be problematic. I'm no expert on it though, there are prob
  14. Hi Hemanta, I believe you may be a student of mine. In GSAP3 Beyond the Basics there is a lesson: Tweening Function-based Values. It will explain how for each target in a tween you can run a custom function to get a unique value. As Richard said, the code in the GreenSock demo is a short and clever way to loop through each panel with very little code. The code loops through each target (panel) and sets a custom zIndex The important thing to understand is that the demo you referenced needs to reverse the stacking order of the DOM elements so that panel
  15. beautiful. I had a feeling it was something dumb on my end. Thanks!
  16. Hi, I tried to incorporate Locomotive Scroll by doing a copy-paste job from the demo in the docs. It went pretty well. However, on Chrome and FireFox (mac) you'll see that the scroller-start and scroller-end markers jump vertically. If I set pin:true you will see that car does a similar vertical jitter. I suspect I set something up wrong with the css, but have been staring at it for quite awhile. Would appreciate any help
  17. I'd recommend looping through the headers and creating a tween with a ScrollTrigger for each h1 like https://codepen.io/snorkltv/pen/qBbeyvm?editors=0010 Also you can pass a css string selector into your tweens //not necessary gsap.to(gsap.utils.toArray('h1'), {x:100}) // recommended gsap.to("h1", {x:100}) Also, I believe it's been recommended that the trigger is not the same thing you are animating as it can potentially mess up ScrollTriggers internal calculations of where things are in the viewport. So maybe use each parent div as the trigger.
  18. I decided to release the video and demos as a free tutorial. Check out the video if you need more help understanding how I configure the dynamic repeatDelay https://www.snorkl.tv/greensock-staggers-with-seamless-loops/
  19. nice catch. {repeat:20} should be removed. the animations are infinite because in the stagger object the repeat is set to -1. A timeline with children that repeat infinitely will never complete or repeat.
  20. The trick is to have each element in your stagger repeat infinitely and have the repeatDelay long enough so that it doesn't repeat until all the other items have animated. I teach how to do this in GSAP 3 Beyond the Basics (link in signature), but here is a reduced test case: https://codepen.io/snorkltv/pen/ExVEOPa?editors=0010 If you want the initial word up there to start, you would just adjust the timeline's playhead position on load accordingly with play(1) or whatever.
  21. Hi there must be a misunderstanding here. I updated my demo so that it is incredibly clear that the onComplete ONLY fires once after all the staggers finish. You will see the images fade after all Freds move down. Also the console.log only fires once. Please take another look.
  22. Just use onComplete in the tween gsap.to("#freds img", { y:100, ease:"none", stagger:0.5, onComplete:function() { console.log("done") } }); https://codepen.io/snorkltv/pen/LYGvdLm?editors=0011 Also be sure to learn about the stagger object Staggering in GSAP3 is SUPER powerful
  23. Also a handy video for you hey
  24. I still hope to learn JavaScript and CSS one of these days
  25. Hi Johnny, That banner is part of my premium GreenSock tutorials at: https://www.creativecodingclub.com/bundles/creative-coding-club Here is the codepen demo if you want to use it: https://codepen.io/snorkltv/pen/BaoZKJN Instructions on how it works and how it was made are available in GSAP 3 Beyond the Basics
×