[Staggering elements depending on their data attribute]

Oh ok I understand now, thanks a lot for your help !

I think I am going to try GSAP version 3 ??

 

[Staggering elements depending on their data attribute]

Thank you Zach. I though the arguments didn't exist because i have tested the first, and its value were always 0.

Is that normal ?

See the Pen dyPMNPb by classikd (@classikd) on CodePen

 

Not the case with gsap 3 apparently

[Staggering elements depending on their data attribute]

Hello,

I am trying to scale list elements depending on their data-attribute, here is what i have :
 

<ul>
  <li data-percent="50">1</li>
  <li data-percent="75">2</li>
  <li data-percent="15">3</li>
</ul>

let tl = new TimelineMax()
tl
  .staggerFromTo('[data-percent]', 0.25, { scaleX: 0 }, { scaleX: function(){
    // i would like to return a dynamic value
    return 0.5
  }}, 0.1);

Is there a way to get the data attribute of the current element ?

I can't find a solution.

 

Thank you

[Use css position in onUpdate callback]

Thanks a lot Jack you helped me so much.

I heard you and I gave up the others methods that i tried above,  you made me understand and so I made it with a different approach:

Here is a codepen: 

See the Pen LqdQWb by classikd (@classikd) on CodePen

I could have spent days on it, you saved my life !

Thanks again !!!

[Use css position in onUpdate callback]

Thank you for your answer Jack !

Yes I use top and left percentage values for responsiveness.
As i am bad at mathematics I am not able to try your second method, but i tried the first one.

Here is a codepen: 

See the Pen JxLWej by classikd (@classikd) on CodePen

 

You can see in the console that I give a good progress value for each timeline, but unfortunately they are not equidistant :X

How to explain that ? I put linear easing everywhere... i really don't understand

[Use css position in onUpdate callback]

Hello,

 

 

I would like to make a half circle navigation, for that i made each nav item following a bezier curve, check its left position in the onUpdate callback, and stop it if its limit was reached.
My problem is that the items do not stop exactly where they should stop.

You can see the console.logs i put for the 3rd item to understand. (also look the css inline, this element should stop exactly at left:50%)
Here is the codepen : 

I wouldn't have this problem if there were more "OnUpdate" executions, but I think I am going in a  bad direction..

I also tried to achieve that with time calculation instead, but as i want the item's easing not to be linear it was too difficult for me to find the exact moment they should stop ?

Please how would you solve such a thing, do you have any solution ?

Thank you a lot.

 

See the Pen Zwrrzg by classikd (@classikd) on CodePen

[Start nested timeline not from beginning]

Yes it does help me a lot !

And you're right i think i'm going to use a function calling itself when completed instead of using the repeat attribute.

Because i encountered another problem, the timelines added after the infinite animation timeline are never played

I saw on an other post that using the callback method would solve this problem so i'm going to try that.

 

Thank you PointC.

[Start nested timeline not from beginning]

Thanks for your help PointC. That's definitly better than what i've done.

But the problem is that tl.duration() returns a number like 1000000000000 if i set the timeline to repeat:-1.

Do you think there is a way to make it working with infinite animation ?

 

See the Pen BWvKye by classikd (@classikd) on CodePen

[Start nested timeline not from beginning]

Unfortunaly that's not working when i do:

tlMain
  .add(getTl().progress(0.5).play());

[Start nested timeline not from beginning]

I have succeeded in adding a label at half time of my staggerTo animation.

In my opinion it's a little bit tricky but i can' t find a better solution.

 

See the Pen gmZpNp by classikd (@classikd) on CodePen

[Start nested timeline not from beginning]

Hmm. Is it possible to add labels between staggerTo animation steps ? Within a callback ?

[Start nested timeline not from beginning]

Hello,

 

In my master timeline i would like to play child timelines not from the beginning, from the half for instance.

I've succeded in using the tweenFromTo() function.

But the problem is that i have to set the 2 values in seconds, and let's imagine if later i change the duration values in my timelines i will have to make a calculation again to find the 2 values and then change them. Not a convenient method.

 

Do you know if a better solution exists ?

 

Thanks a lot.

See the Pen qrQjMO by classikd (@classikd) on CodePen

[Micro jumps (antialiasing) at the end of tweens]

I looked at this codepen and there is no longer flickering for me (FF, Chrome, Opera).

I think you believe the flickering problems remain because of the ease you use, try using a linear one.

[Micro jumps (antialiasing) at the end of tweens]

Hello,

 

Those flickering problems can usually be solved by doing a GPU render using 3d properties on elements (translateZ(0), perspective...).

 

I have added this CSS code and now it looks pretty fine:

#banner ,
#banner *{ 
backface-visibility: hidden; /* Chrome */
filter: grayscale(0%); /* FF */
}

In your case i had to add a filter property for Firefox, i don't know why. Maybe the blur filter you use is the cause of the problem.

Of course this is not a good method to use the universal selector, this code is just a test I've done fastly.

Moreover maybe you could use the GSAP force3D property in your JavaScript code instead of CSS.

 

See the Pen oBRKEo by classikd (@classikd) on CodePen

[TimeLine Reverse & repeat]

Hello

 

I think you should use yoyo and repeat properties :

See the Pen oBVrPe by classikd (@classikd) on CodePen

[SVG rotationX/rotationY with GSAP 1.19.1]

I think my skill level is too low to investigate with you but i follow the discussion with attention

In any case at the moment i leave aside those kind of animation.

[SVG rotationX/rotationY with GSAP 1.19.1]

Thanks a lot for your helpful advices Jonathan. 

I recognize that i develop in Chrome by simplicity, it's a little bit faster and i like that each page runs its own process. But is it really worth it...

I used to use Firefox many years ago but i gave it up following the "script not responding" errors i had which made me crazy !

Developing in Firefox would have saved my time in this case and it would drive me in the good direction to follow spec, so i'm seriously going to think about it.

[SVG rotationX/rotationY with GSAP 1.19.1]

PointC, i'd like to animate the shapes within the SVG, not the SVG itself.

Well anyways I'll give up 3d animations on SVG shapes, i must read about the browser support i'm not really aware.

Indeed I understand your choice not to support browsers deviations you're totally right.

I'm a little bit sad but i will find another way to do what i want.

 

Thanks all three for your explainations.

[SVG rotationX/rotationY with GSAP 1.19.1]

Hello,

 

I'm trying to make rotationX/rotationY transforms on SVG shapes with the last version, GSAP 1.19.1, but it does not work.

This is working only with rotation or rotationZ properties.

 

Here you can see that nothing happens on mouseover event:

 

But if i am using GSAP 1.19.0 or lower version everything is working well :

See the Pen NdorKo by classikd (@classikd) on CodePen

 

Is there a bug or do some properties have changed, i have found nothing about it ?

 

Thanks for your help.

See the Pen rjPxKr by classikd (@classikd) on CodePen

[Reverse nested timeline]

That's working perfectly now thanks a lot Carl.

I have to go deeper in learning TweenMax, with the experience i have now i think i would never have find this method to solve my problem.

 

I have nested the timeline in another because i tought it was the good way to do, but maybe it's not ?

It looks well organized, easily readable... as I will have many others timelines following the closing navigation animation.

But i'm pretty new in animation with this tool and maybe you have a better way to teach me

 

Thanks for your help.

[Reverse nested timeline]

Hello,

 

I'm sorry I can't explain very well my issue because I don't know why this behavior happens.

In my exemple I would like to understand why as soon as i click a navigation link (home or contact), i get my navigation animations disappear (try opening the navigation again, you'll see the navigation appears without animation) 

 

Do yo have any idea ?

 

Thanks a lot.

 

See the Pen bgKMpO by classikd (@classikd) on CodePen

[CSSRulePlugin and stagger]

Hahaha PointC, you're totaly right. I spent many hours trying to understand why i can't achieve what i want and i have a kind of headache now.

Following the advice of Jonathan I succeeded in doing staggerTo() on pseudo elements but i had to add ID attributes and changing the selector to target all pseudo elements, not very pratical:

See the Pen VPrbRx by classikd (@classikd) on CodePen

 

It looks like CSS specificity priorities or something like that, but i don't want to understand anymore !!

I'm going to do simpler, adding DOM elements will be a better solution indeed.

 

I really want to thank you all three for your help. I really love doing animations with your tools, i actually use GSAP for animating 3D scenes and it makes my job easier. Merci beaucoup.

[CSSRulePlugin and stagger]

Hello,

 

You're right my example is not good and in this case i should use to() instead. 

I was trying to show you my problem but forget it

 

Look, in your example if i change the selector to ".box:after" this is no longer working:

See the Pen ygPVgm by classikd (@classikd) on CodePen

 

And in this example too, the staggerTo() on :before elements does not work even if i target all :before elements:

See the Pen egeBWN by classikd (@classikd) on CodePen

 

I really don't understand why :S Do you see what i am doing wrong ?

 

I think it's not a problem for me that :before and :after elements are not in the DOM because i use them only for visual effects (effect on hover etc) and i think it's a little bit better than adding tags in html but i might be wrong.

 

Thanks for your time

[CSSRulePlugin and stagger]

Ok. Thanks for your answer.

[CSSRulePlugin and stagger]

Hello,

 

Is there a way to do staggerFrom/To animations on pseudo elements ?

 

Thank you
 

See the Pen zNEyYy by classikd (@classikd) on CodePen