[Detect when a series of separate tweens are done]

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!!

[Detect when a series of separate tweens are done]

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?

[Detect when a series of separate tweens are done]

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.)

See the Pen 58126b861d0b181cf8c9f381e7092b7b?editors=0011 by ryankbrown (@ryankbrown) on CodePen

[Do repeated timelines take into account their nested timelines?]

Ahh brilliant! Understood! Thank you so much!

[Do repeated timelines take into account their nested timelines?]

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?

 

 

Thanks so much!!

See the Pen mdQEZbB?editors=0010 by ryankbrown (@ryankbrown) on CodePen

[Having trouble understanding smoothOrigin property]

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

[Having trouble understanding smoothOrigin property]

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.

 

See the Pen eae014d9db1663102cb5e51005a2cca0?editors=1010 by ryankbrown (@ryankbrown) on CodePen

 

 

 

[Having trouble understanding smoothOrigin property]

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.

 

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!

 

 

See the Pen 348ed13ae46b4ce70bc20b1f16d755d3??editors=0010 by ryankbrown (@ryankbrown) on CodePen

[Question about executing multiple overlapping tweens on a timeline]

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!

[Question about executing multiple overlapping tweens on a timeline]

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!

 

 

See the Pen QWrvdpQ by ryankbrown (@ryankbrown) on CodePen

[Staggering within timeline with .to() keyframes]

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!

[Staggering within timeline with .to() keyframes]

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!

[Staggering within timeline with .to() keyframes]

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

[Staggering within timeline with .to() keyframes]

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');

 

 

See the Pen f4c38c451e6454042c6f8c799c59d4bb by ryankbrown (@ryankbrown) on CodePen