ryan_brwn

Ah ok that makes perfect sense. I would explain why I was trying to avoid using a timeline but based on your answer it seems completely unnecessary. The way I had set up my project had me sort of binding gsap calls to individual objects that move but I realized I needed something to happen when the objects stopped moving. And being that I'm always learning something new about gsap I was just curious if there was a methodology or functionality in the library that would allow for that. Thanks for your help!!

Ah that makes perfect sense and I think that's probably the route I'll end up going. I am still curious to see if there's a way to do this without creating a timeline. Any ideas?

This might be a newb question but is there a way to detect when a series of separate tweens are done? Here's a minimal demo. I'd like to call tweensDone() when both tweens have finished. (FYI The object structure mirrors how I'm structuring things on a real project.) https://codepen.io/ryankbrown/pen/ZEmXYeo/58126b861d0b181cf8c9f381e7092b7b?editors=0011

Ahh brilliant! Understood! Thank you so much!

Hello all! Having trouble understanding why something is happening. So I have a minimal demo with timeline that is set to repeat and also has a nested timeline. Expected Result The box moves down, and then to the right in the main timeline (with a repeat set to the timeline) and then in the nested timeline the box scales and changes background colors twice. I would expect the timeline to then repeat this entire sequence in order. Actual Result It seems like the repeat set on the main timeline doesn't consider the nested timeline. Also curiously, the full nested timeline doesn't seem to play out fully. It seems as though the repeat is causing the two timelines to conflict. Question Do repeats set on timelines with nested timelines account for the nested timeline durations/tweens/etc? What is going on and is there a way to get the expected result? https://codepen.io/ryankbrown/pen/mdQEZbB?editors=0010 Thanks so much!!

Thanks so much for the help! Definitely cleared up some confusion I’ve had for a while!

Ahhhh! So let me try and say back to you what I understood. Let me know if I got it correct. smoothOrigin Use when you want to apply a tween with a different origin than the previous set or tweened origin and you dont want the new origin to shift the element's transformation from the previous tween at the start of the new tween. SVGOrigin Normally when specifying transform-origin on an svg element the origin is relative to the SVG's bounding box. Using SVGOrigin calculates the transform origin relative to the specified svg child element. My Issue My previous demo (which was a little whack when I went back and looked at it) was using .set() to set the scale but not specifying a transformOrigin, which defaulted to the "top left". // Issue in the previous code tl .set('.ray__arrow--right', { scale: 0 }) .to('.ray__arrow--right', { scale: 1, transformOrigin: "bottom left" }) Then in my .ray__arrow--right tween when arrowhead was scaling in the transformOrigin was defaulted to "top left" from the set (and ignoring or miscalculating my transformOrigin: "bottom left" in the tween?). Is this correct? Is this what was happening? Solution So based on your rec, I .set() the proper transform origins to the appropriate arrowheads and viola! (I realized your rec was to use a .from() instead of .set() and a .to() but my production code has to go with the later method. https://codepen.io/ryankbrown/pen/JjmgJaN/eae014d9db1663102cb5e51005a2cca0?editors=1010

Hey all, Background I'm trying to understand a little more how svg transform origins, smoothOrigin, and SVGOrigin work. I'm working on an svg animation and I was having trouble with a <path> transforming oddly based of its origin. I know that when using SVG transform origins do not behave the same as they do with regular DOM elements and I realized that GSAP adds some extra sauce to account for this discrepancy (When I inspected the transformed path there's an data-svg-origin attribute applied.) When trying to solve the issue I ran across the smoothOrigin property in the gsap documentation and was able to apply smoothOrigin: false to get my desired result. However, I guess I dont understand how smoothOrigin works because I would have thought smoothOrigin: true would have fixed it. Demo Here's a minimal demo of the issue I was having and how smoothOrigin: false fixed it. https://codepen.io/ryankbrown/pen/VwEJQra/348ed13ae46b4ce70bc20b1f16d755d3??editors=0010 Question - So my question is, does gsap currently try to account for the svg origin issue by default now (in other words is smoothOrigin:true the default)? - And was this the cause of my <path> transform origin issue and if so why? - Also I've read about a gsap featured called SVGOrigin and want to know if it's the same thing as smoothOrigin or if it has a different use. Thanks so much!

Ahhhhhhh, Ok this makes perfect sense. I think you're right in that solution 2 is the best way to mentally organize things. I really appreciate how gsap tends to offer lots of different ways to solve common problems. Thank you so much for your help!

Hi! I'm working on a single timeline animation that involves several elements. I want one element to execute a long tween while other element(s) proceed with multiple tweens. I've attached a codepen link where I tried to explain what I'm trying to accomplish and the issue I'm running into. I'm pretty sure I'm just running up against my own limited understanding of how tweens work on a timeline, but I figured I'd ask for help. Thanks! https://codepen.io/ryankbrown/pen/QWrvdpQ

I figured it out! I'm an idiot. My build process was somehow grabbing GSAP version 3.5.0 instead of updating it to 3.8.0 and it didn't occur to me to check the output. Thank you all for the help!

haha I'm having trouble reproducing the error in a minimal demo myself! Maybe I just need to try and see if any other parts of my code are interfering with gsap or something. I thought I'd post here to see if something similar had happened to anybody else. Thanks for the replies!

I am! I'm using version 3.8.0 on the CDN and also locally!

Hi all! I have curious question. Does anybody know why the code below would work perfectly fine on Codepen and also work on my local machine when I'm loading GSAP via CDN, BUT when I load GSAP locally via a copy gsap.min.js the keyframes doen't seem to acknowledge the staggers (I have a screen recording attached below). let tl = gsap.timeline(); tl.to( document.querySelectorAll('.box'), { keyframes: [{ alpha: .25, duration: .045 }, { alpha: 1, duration: .045 }, { alpha: .25, duration: .045 }, { alpha: 1, duration: .045 }, { alpha: .25, duration: 1, ease: Sine.easeIn }], stagger: .5 }, 2).to('.box-04', { rotate: 360, duration: 2, alpha: 1, ease: Expo.easeOut }, '+=.5'); gsap-locally-loaded.mp4