GSAP Scrolltrigger lottie scroll pinning container

[17252_1494126623]

Hello There, 

 

I'm trying to achieve this effect:

https://drive.google.com/file/d/1Kc7vUhhd2gu75KSgSlZJbBdxYqrbIjDd/view?usp=share_link

pinning the section in middle of the screen, almost like the scroll were deported to the  scrubbing of my lottie animation. I can't achieve this result using pinning, bescause the section take 100% of the page... I tried many params of start endetc... but there's no effect ad I can't find an working example of this type of scroll effect.

 

many thanks for your help !

 

 

 

See the Pen QWBbQBL by jchamois (@jchamois) on CodePen

[Cassie]

Hi there!

So the best trick for this kind of animation is to build out the entire animation first in a timeline. Then when the timeline is complete and doing what you want - add a scrollTrigger.
 

You can definitely achieve this using pinning. Why don't you create the animation for that section first, then when you've got that working, pop back here and we'll help you hook it up to scroll.
 

[17252_1494126623]

Thank you ! 
So i try that but in my case all the text appearance are sync with frame of the lottie animation, I've create a timeline for my text appearance, is there a way to play and pause it at certain poitn of the lottie animation ? I tried 

 tlLottie.to({
            frame: 0,
        }, {
            frame: animF.totalFrames - 1,
            snap: "frame",
            duration: 20,
            onUpdate: function() {
                 if(frame >= 0 && frame =< 20) {
                    gsap.to(...)
                }
           })

or I tried to create another timeline that I play like that , but i have to endlessly play with delay and duration value in my timeline to sync everything: 

    tlText
        .to('.lottie-text.communication', { right: 0, opacity: 1, duration: duration})
        .to('.lottie-text.communication', { right: '-15%', opacity: 0, duration: duration, delay: duration / 4})

        .to('.lottie-text.dataProd', { left: 0, opacity: 1, duration: duration})
        .to('.lottie-text.dataProd', { left: '-15%', opacity: 0, duration: duration, delay: duration * 5})

tlLottie.to({
            frame: 0,
        }, {
            frame: animF.totalFrames - 1,
            snap: "frame",
            duration: 20,

           onUpdate: function(){
                     timelineText.progress(tlLottie.progress())
          }
})

[Rodrigo]

Hi,

 

Can you provide a minimal demo for this?

 

Here are a few examples of using Lottie animations with ScrollTrigger:

Hopefully these are useful to get you started.

 

Happy Tweening!