[Problem with gsap.context() and revert]

12 hours ago, Rodrigo said:

I recommend you that for future questions just use Stackblitz, far more stable and less troubles than in codesandbox.

Ok, i get it. I´ll use it the next time. I appreciate the help. i will take a look to the code. 

Thank you very much.

[Problem with gsap.context() and revert]

Hi, Rodrigo.

The link is not working. 

[Problem with gsap.context() and revert]

i have a problem with revert method and gsap.context(). The animation breaks when i place it inside the context. I have an example where you can see the complete code and prove it.

 

https://codesandbox.io/s/damp-snowflake-8ohesq?file=/src/App.js:4052-5848

 

Can anyboy help me with this?. Thanks

 

Regards

[Fade In pinned images on scroll]

On 12/23/2021 at 8:23 PM, akapowl said:

Actually when you are pinning the inner wrapper it would probably be neccessary to use the outer wrapper as the trigger for each of the fading-scrolltriggers as that one will keep scrolling while the inner will be pinned in place. I was wondering before why it worked the way I suggested it before, but didn't have enough time to dig into the setup in detail.

Perfect. Now It seems is working without problems.

 

Thank you again!.

[Fade In pinned images on scroll]

 

Hi again.

 

I have tried to adapt the code to a react application but it doesn´t work.  I can´t see what is wrong 

 

See the Pen MWEEzgp?editors=0010 by misticvm (@misticvm) on CodePen

 

Regards

 

 

 

[Fade In pinned images on scroll]

Absolutely awesome, akapowl... Thank you very much.

 

I spent all day yesterday trying to fix that behavior (no success... i finished frustrated). Right now i´m going to try implement your code.

 

Quote

It's always best to provide a demo with what you have tried yourself, because as the forum guidelines state, people helping here just don't have the time to craft custom code solutions for everybody coming into the forums.

 

Sorry about that but that is why i mentioned the original example of this thread. My sincere apologies. 

 

Regards.

[Fade In pinned images on scroll]

Hi, everybody.

 

How could i add content (text or whatever) before images in that example?.

 

Thanks. 

[ScrollTrigger: weird behavior when resizing]

Thank you very much to both!

 

It seems that everything works perfect now.

[ScrollTrigger: weird behavior when resizing]

Hi. Thanks for reply.

 

i made this codepen. I hope it works....

 

See the Pen YzWzvON?editors=1111 by misticvm (@misticvm) on CodePen

[ScrollTrigger: weird behavior when resizing]

Hi!. First of all. Sorry for my english.

 

ScrollTrigger works correctly but when I resize the screen the values of the style attribute are lost and the element that I am animating returns to its initial position

ScrollTrigger.saveStyles(data)

  ScrollTrigger.matchMedia({

    // Desktop
    '(min-width: 900px)': function () {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: imageOverlayBorder,
          start: '10% 20%',
          end: 'bottom 75%',
          toggleClass: { targets: [data, imageOverlay], className: "active" },
          toggleActions: 'restart none none reverse'
        }
      })

      gsap.set([imageOverlayBorder, imageOverlay], { autoAlpha: 1 })
      gsap.set(dataColumn, { alignItems: 'flex-end' })

      tl
        .fromTo(imageOverlayBorder, { backgroundColor: 'rgba(0, 0, 0, .3)' }, { duration: .5, backgroundColor: 'rgba(0, 0, 0, 0)', ease: 'linear' }, 'overlay')
        .fromTo(imageOverlayBorder, { boxShadow: '0 0 0 0 inset #fff' }, { duration: .5, boxShadow: '0 0 0 80px inset #fff', ease: 'expo.out' }, 'overlay')
        .fromTo(imageOverlay, { x: '-100%' }, { x: '-35%', ease: 'expo.out', duration: 1 }, 'overlay')
        .fromTo(title, { color: '#fff' }, { color: '#ff570d', duration: .25 }, 'overlay')
        .fromTo(data, { left: '50%' }, { left: 'calc(50% - 100px)', ease: 'expo.out', duration: 1 }, 'overlay')
        .fromTo(meta, { autoAlpha: 0, y: 25 }, { duration: .5, autoAlpha: 1, y: 0, ease: 'expo.out', }, '-=.25')
    },

 

CSS Code:

 

@media screen and (min-width: 900px) {
        left: 50%;
        width: 50vw !important;
        transform: translate(-50%, -50%);

        .et_pb_column {

          display: flex !important;
          flex-direction: column !important;
          align-items: center;
        }
      }

 

I made a little video where this weird effect is reproduced

Cheers.