ngrmm

thanks @mvaneijgen I realized that I have to redraw the letters and maybe not get things the way i wan. So I went for another animation

It seems that in the last (2 > H) the point are moved in a random order and so the shape has many edges. I tried type: rotational and increase the shapeIndex. But it doesn't help. Is there another way?

THX. But looks like the "<" position parameter not doing what I want. I want the frames animation and the box animation to be in sync from timeline start to the end.

is this the right way? https://codepen.io/ngrmm/pen/XWBLLOZ

I would like my frames stagger animation to start at trigger start and last to the trigger end. And the two box animations should also start at trigger start. I used relative positions, but it does not work. Do I have to use absolute positions?

@mvaneijgen Thanks! Yes I'm a bit familiar to the snap property. However my example was not the best case for my problem. I forked your demo and added a fourth section. Unfortunately it does not work well. When the third Section comes into view, it does not snap and scrolling up causes some problems too. https://codepen.io/ngrmm/pen/BaVgbrO

I have sections and one of them has boxes. I would like to have the snap effect for each section and each box Is it possible to have the snap effect for nested elements? As far as I understand native CCS snap does not work with nested Elements.

UPDATE: I managed to do it with callback function https://codepen.io/ngrmm/pen/ExRZxvo But is it possible to to this only with scrollTrigger?

I would like to change the text of a header element with scrolltrigger. I store the needed text in data-attributes of the section. However it works only if I scroll down and only once. Is my toggleActions wrong or do I have to use a timeline?

I'm sure this is done 1000 times before, but i'm not able to find an example Is there a way to have the continuous bouncing ball with a div and smoother? thats the best i can get with plain JS

i think i found another example which works! https://codepen.io/akapowl/pen/VwKLZQz

i forked the Jump to section with layering example and added a nav with anchor-links to each section. When i click on a link in my nav the animations stop each other. How can i pause or stop the jump-to-section-animation and if a nav-link is clicked. This Problem appears when the target-section is more than one section away from the current section

Is it possible to set something like markers (anchors) in the timeline and use them as navigation links? Normally i would use scrollmagic for this and have extra divs (triggers). So my Wrapper would have the needed scrollheight and my tirggers are positioned absolute to the top. Everytime a trigger reaches the top i would fade-in my layer and update the nav. Is this even possible with scrollTrigger?

thank you Zach! i did another codpen for beginner like me with the result: https://codepen.io/ngrmm/pen/KKMRjrO and is it possible to have each function for all those articles in case i would have a dynamic number of articles?

as you see in the codepen i have 4 articles inside my section. i would like to have this animation timeline while section is pinned: – fadeout article.intro – fadein article.one – wait a bit - fadein article.two – wait a bit - fadein article.two something like: industries.to('article.intro', {autoAlpha: 0, duration: 1}) .to('article.one', {autoAlpha: 1, duration: 3}) // wait duration:3 .to('article.two', {autoAlpha: 1,duration: 3}) // wait duration:3 .to('article.three', {autoAlpha: 1,duration: 3}); and my other question is: am i right that i can use the duration as a relative time, because of using scrolltrigger. so my time are actually the pixels. and the sum of all durations are relative to my pixel-distance?