Jump to content
GreenSock

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

Carl last won the day on May 28

Carl had the most liked content!

Carl

Moderators
  • Content Count

    9,409
  • Joined

  • Last visited

  • Days Won

    534

Everything posted by Carl

  1. 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/
  2. 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.
  3. 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
  4. 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
  5. 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
  6. beautiful. I had a feeling it was something dumb on my end. Thanks!
  7. 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
  8. 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.
  9. 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/
  10. 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.
  11. 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.
  12. 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.
  13. 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
  14. Also a handy video for you hey
  15. I still hope to learn JavaScript and CSS one of these days
  16. 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
  17. Great suggestions,Zach. Im a little unclear on the details but maybe something like doing tl.pause(1)// pause at 1 second and then use a delayed call to play the timeline after some amount of time. on my phone so I can’t type it all out or do a demo. maybe it helps.
  18. By encourage I think he meant "incessantly bugged me for 2 years" Now, that Craig got his blog up, I'll move on to @OSUblake The world needs a GSAP + Pixi hero. Great job, Craig. I'm truly impressed. I can't wait to finish reading all of it. I'm sure motiontricks.com will be a tremendous resource for anyone learning and mastering GSAP. I'll whole-heartedly recommend it. When's the next post going live?
  19. Yeah, with GSAP 3 you have many more options for staggering. Check out this video on the stagger object which lets you stagger from "end" and "center" animation.from(split.chars, {opacity:0, y:50, ease:"back(4)", stagger:{ from:"end", each:0.05 }}) Demo here: https://codepen.io/snorkltv/pen/BajxopX
  20. @GreenSock thanks, the new file fixes the issue. I don't need a container div for the svg now and i'm getting a better understanding of how pinning works. @mikel love your humor I drew the car (kind of traced it) in Flash many years ago. I've gotten a lot of miles out of it for many lessons through the years. I was surprised how well the SVG export from Flash held up in the browser.
  21. thanks, zach. Mikel, I'm shocked. You should have these everywhere (VW GTI or Golf)
  22. perhaps this is still related to the display:inline thing. But now with .carWrapper (white background) as the trigger, notice that it is twice as tall as it should be. If you comment out all the JS code you will see the white background of carWrapper is just about the height of the svg car (as expected) When the js runs, the wrapper div grows in height. it gives the impression the car is moving diagonally from top left to bottom right as you scroll.
  23. thanks for the speedy help. i realized a few minutes after posting that what you said here is most likely my big issue. but I was also having trouble just pinning the car when it wasn't in the container and you are most likely onto something with that display:inline thing. Thanks!
  24. I'm working on a lesson for pinning and getting some weird results in the attached pen. It seems that when the animation starts the #car's container div .carContainer collapses making the white background go away. Also the "more text" is moving up while the animation is being pinned and scrubbed, and then oddly jumps back down when the animation is complete. I was expecting the default pinSpacing to keep the "more text" hidden and only come into view when the car becomes un-pinned. Also, when the animation gets unpinned you will see the car is under its con
  25. Yup there is no video export for JavaScript animations created in Animate because they run in a web browser. Best you can do is record your screen using ScreenFlow, camtasia or whatever your OS supports.
×