[Change background on scroll]

Wow thank you so much!! @Cassie @akapowl

[Change background on scroll]

Hey all! I'm trying to create a simple script to change the background color with ScrollTrigger, but every section change the color jumps can you help me understand what am I wrong?

 

Thank you!!

See the Pen poReVNR?editors=0100 by stefanopeschiera (@stefanopeschiera) on CodePen

[ScrollTrigger on fixed element]

Thank you @akapowl the last one is what I’m looking for!! 🤩🙌

 

[ScrollTrigger on fixed element]

Hey all! I am trying to implement ScrollTrigger on a fixed element. The idea was to trigger the element I use from space (.spacer). Can anyone tell me how to do it?

Thank you!!

See the Pen gOgrdBj by stefanopeschiera (@stefanopeschiera) on CodePen

[Resize and positioning text on scroll]

Hi all! I'm trying to resize and positioning a fixed text on scroll with ScrollTrigger and CSSRulePlugin, font size made a good smooth transition but flex propriety snaps. Can you tell me why? 🧐

Do you think it is the best way to achieve this interaction?

Thank you so much!!

See the Pen GRrpqZE?editors=1111 by stefanopeschiera (@stefanopeschiera) on CodePen

[Arch distortion effect on motion]

1 hour ago, Shrug ¯\_(ツ)_/¯ said:

You might also be able to gain something from these examples which use GSAP + Three.js with similar effect.

 

•

 

• https://greensock.com/forums/topic/22768-text-underline-page-transitions-that-are-super-smooth/?do=findComment&comment=118065

• https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/

 

 

 

 

Great transition! 😍

[Arch distortion effect on motion]

4 hours ago, akapowl said:

 

Hey @stefanopeschiera

 

Just to make sure:

 

@GreenSock was probably referring to the distortion-effects on the images on scroll.

 

If it is only the reveal-effect on the preload background-overlay you are after though, you can achieve that by tweening on SVG paths, as discussed in this thread (it even contains an example that is pretty similar to the reveal on that page you linked to)

 

 

 

Yes I'm referring to this!! Thank you @Shrug ¯\_(ツ)_/¯

[Arch distortion effect on motion]

Ok thank you! 😉

[CustomWiggle loop little break issue]

Yes! Thank you so much 🤓

[Arch distortion effect on motion]

Hey all! With GSAP it’s possible to do an arch distortion effect on motion?  Here’s an example on the preload background https://jonathanalpmyr.com/

 

Thank you! 🤓

[CustomWiggle loop little break issue]

Hi everyone! I try to loop a CustomWiggle animation here the link https://theverso.webflow.io/

After 5-6 loops there's a little stop. How I can avoid it?

 

Here's the JS:

 

var mySplitText = new SplitText(".c-preloader_text", {type:"chars,words, lines"}),
    tl = new TimelineLite();

CustomWiggle.create("myWiggle", {wiggles:10, type:"uniform"});

        
//tl.staggerFrom(mySplitText.chars, 3, {x:800}, 0.02);
tl.staggerFrom(mySplitText.chars, 5, {y:15, repeat: -1, ease:"myWiggle"}, 0.05, 0)

 

Thank you so much! 🙂