[Create draggable Momentum Slider with GSAP Observer (without Draggable Plugin)]

Hi folks,

 

I'm trying to create a draggable Slider with only the GSAP Observer not with the Draggable Plugin. I guess it's somehow possible since the onDrag(e) Event receives all the necessary data to create momentum after the user stops dragging.

 

Any ideas? 😊

See the Pen OJQPpLe?editors=0110 by codekyt (@codekyt) on CodePen

[Deform Circle on mousemove depending on the velocity of the mouse movement]

Thank you for the quick response! Works gracefully. I just updated my pen.

[Deform Circle on mousemove depending on the velocity of the mouse movement]

Hi all,

 

I want to recreate this Animation: https://res.cloudinary.com/delicious-cookie/video/upload/v1635782143/Screen_Recording_2021-11-01_at_16.55.02_pwhzt6.mov

 

I'm trying to deform the ball depending on the velocity / acceleration of the mouse. The quicker the movement the narrower the ball gets. Is there a GSAP Plugin that can help me with that?. 

 

muchas gracias in advance.

See the Pen XWazaKa by codekyt (@codekyt) on CodePen

[Set SVG Path Length dynamically based on Text length]

Hi everyone, 

 

I would like to create this curved button underline hover effect. Is there a way to set the length of the SVG Path based on the text length in the <span> element? It should look like in the screenshot down below.

See the Pen dyWpxgx by codekyt (@codekyt) on CodePen

[Update height property of Tween when resizing window]

I would like to update the tween height based on the current window height. Because in Safari Mobile the window.innerHeight changes when we scroll (Bottom Navbar of the browser).

 

I saved the timeline in a constant. Is there a way to update the height property without to set the whole new timeline?

 

const tl = gsap
  .timeline({
    paused: true,
  })
  .to('.navbar', {
    height: window.innerHeight,
    duration: 0.3,
    ease: 'power2',
    backgroundColor: '#8E0919',
  })

window.addEventListener('resize', e => {
	// update tweeen height with window.innerHeight
})

 

[Pinned Section - Text Fade In & Out with ScrollTrigger]

Works perfectly. Thanks for the quick response!

[Pinned Section - Text Fade In & Out with ScrollTrigger]

Does anyone know how to fade a text in and out again using the ScrollTrigger Plugin? Like the Apple Airpods Pro Product Page: https://www.apple.com/airpods-pro/

 

On Scroll the Text slides up and simultaneously fades in. If we scroll further the text fades out und the next text fades in.

I've found a similar pen but the section only fades out.

 

Thank you for your help!

See the Pen GQgWrY by Sahil89 (@Sahil89) on CodePen

[Scroll Based Animation using GSAP 3, lottie-web and ScrollTrigger]

Hi Zach,

 

Thank you so much. Works gracefully!

[Scroll Based Animation using GSAP 3, lottie-web and ScrollTrigger]

Hi all,

 

Loving the vibe here😊 This is my first post in the forum ever.

 

I'm trying to implement a scroll based Lottie animation with GSAP 3 and the ScrollTrigger plugin. I've found a solution with GSAP 2 and ScrollMagic but things changed in the newest Version. Does anyone has a working example?

 

Thanks for your support.

 

Cheers,

Nattha

 

See the Pen ROymbz by jama1017 (@jama1017) on CodePen