[morphSVG multiple morphs]

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

[morphSVG multiple morphs]

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?

See the Pen qBMNjyQ by ngrmm (@ngrmm) on CodePen

[Positions in a Timeline with stagger scrub tweens]

8 minutes ago, mvaneijgen said:

Yes that is one of the options, Personally I like to use the  "<" position parameter, this means animate at the same time as the previous tween. This way it doesn't matter if you end up putting something at the start of the timeline in the future. All the tweens close to each other will start together.

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.

[Positions in a Timeline with stagger scrub tweens]

is this the right way?

 

See the Pen XWBLLOZ by ngrmm (@ngrmm) on CodePen

[Positions in a Timeline with stagger scrub tweens]

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?

See the Pen VwBJOyz by ngrmm (@ngrmm) on CodePen

[Layered Reveal + Nested Snap]

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

 

See the Pen BaVgbrO by ngrmm (@ngrmm) on CodePen

[Layered Reveal + Nested Snap]

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.

See the Pen yLEdZEE by ngrmm (@ngrmm) on CodePen

[ScrollTrigger + TextPlugin]

UPDATE:

 

I managed to do it with callback function

See the Pen ExRZxvo by ngrmm (@ngrmm) on CodePen

 

But is it possible to to this only with scrollTrigger?

[ScrollTrigger + TextPlugin]

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?

See the Pen JjZbQjO by ngrmm (@ngrmm) on CodePen

[Bouncing Ball]

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 

See the Pen jOMmmpo by ngrmm (@ngrmm) on CodePen

[Jump to section with layering and Nav - ScrollTrigger]

i think i found another example which works!

 

See the Pen VwKLZQz by akapowl (@akapowl) on CodePen

[Jump to section with layering and Nav - ScrollTrigger]

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

 

See the Pen ExgymdG by ngrmm (@ngrmm) on CodePen

[timeline markers for navigation links]

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?

 

See the Pen jOrKyPv by ngrmm (@ngrmm) on CodePen

[delay or waiting between animation inside a timeline]

thank you Zach!

i did another codpen for beginner like me with the result:

See the Pen KKMRjrO by ngrmm (@ngrmm) on CodePen

 

and is it possible to have each function for all those articles in case i would have a dynamic number of articles?

 

 

[delay or waiting between animation inside a timeline]

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?

 

See the Pen gOMzJxw by ngrmm (@ngrmm) on CodePen