Position parameter doesn't work for simple timeline.

[Elicrespo]

Hey guys,

 

Adding position parameter to the second tween makes it stop working. What am I missing?

 

Here is the link to the live site connected to codepen: https://photo-spread-gsap-flip.webflow.io/staggerfall

 

Thank you 

See the Pen rNoNOLe by elicrespo (@elicrespo) on CodePen

[mvaneijgen]

Hi There!

 

There are several types of position parameter's and there is probably a combination of parameters that will break the setup, adding the tween to a negative position before the timeline starts for example. 

 

So what are you adding to the position parameter that makes it break? 

 

It is the easiest for everyone of you provide a minimal demo with all the parts in place, so that we can debug the problem directly. There were a few issues with the pen which I had to first debug before I could debug the issue it self (HTML was commented out, HTML elements were missing, jQuery was missing). Just an FYI, I've updated the pen below with the fixes and a position parameter. 

 

If I place a 0 in de position parameter it works as expected to me. Can you show us which position parameter breaks the setup?

 

See the Pen ExGxeao?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Elicrespo]

Hi @mvaneijgen,

 

Thank you. I appreciate your reply and all the edits. Yes, I intentionally left the html commented, as I supplied the link to the live page where you can see the animation and any changes to JS will be reflected. Here is the link again: https://photo-spread-gsap-flip.webflow.io/staggerfall. The animation isn't fully visible in Codepen. If you could visit the page above just to have a reference. 

 

I have tried and tested all of the position parameters. The desired effect is to have the the second tween start 25% into the first tween.

 

Adding a 0 as position parameter will have everything start at the same time, which is not the desired effect.

 

Adding "<50%" makes the odd patterns stop animating.

 

Adding "-=50%" makes the even patterns stop animating.

 

I tried 0.2, 0.5 and 0.7 and all patterns animate at the same time.

 

I tried "-=0.2" and they alternate which I had before adding any position parameter. I tested all of these in the pen you edited and shared above. The position parameters don't behave as expected. I have used them heavily in other projects. But this is the first time on an SVG. 

 

I'm trying to create this effect in the images below. The odd pattern animates just a little bit behind the even pattern:

 

Again, thank you so much. 

 

[mvaneijgen]

15 minutes ago, Elicrespo said:

I intentionally left the html commented, as I supplied the link to the live page where you can see the animation and any changes to JS will be reflected

I see, the problem with it is we can't debug a live website and anyone new to the code doesn't get the context in which everything is made, that is why a minimal demo is so helpful, there we can just make a few edits and see things changing to figure out what is going on. 

 

I've made your demo even simpler, by removing some of the patterns, we don't need them all to to debug it and it is easier on the eyes (I got dizzy 😵‍💫 looking at all those blocks)

 

I've enabled GSDevTools and set the repeat to 10 instead of -1, now we have a manageable time of around 18 seconds. If you see around half of the whole timeline the odd elements come in, so they don't stop, they listen to your request. They will start animating at 50% of the previous tween, but your previous tween is not 0.5 (the default duration), but 0.5 * 10 (or in your original demo 0.5 * ∞ 🫣 ), this is a simplification the stagger amount also counts, but lets leave that out. 

 

If you want the second tween to come in at half the time of the previous tween and you are using repeats, you'll have to set a fixed duration of the original duration minus the repeats (so 0.5/2 = 0.25) instead of a percentage based value. 

 

Hope it helps and happy tweening! 

 

See the Pen gOZOdBP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

As per your other topic, I'm going to leave that one unanswered, so someone with more SVG knowledge can answer it. But I wanted to note that SVG and the browser use a different pixel space. The SVG has a fixed pixel with which get scaled in the browser so if the original SVG is 500px in width it and you tell it to move the current browser width of 1000px it will go over the SVG bounding box, maybe the below video helps explain it a bit more:

 

 

[Elicrespo]

Thank you @mvaneijgen,

 

I understand, and you are right; moving forward, I'll include a minimal demo to be more direct and save everybody's time. 

 

Lol it is hard on the eyes especially on white.

I am aware that the timeline duration is split between the tweens, but this time I wasn't thinking about that. Yes, it is 0.25 instead of 0.5.

 

Thank you. I appreciate your help.