Problem with 'transform' when when i use Scroll Trigger

[GGQa]

Hello, 

I create a project with Gsap and ScrollTrigger. Gsap is used for scrolling in parallax, and ScrollTrigger is for animating elements while scrolling.

The problem is that when Gsap animates elements using 'transform' - the ScrollTrigger cannot find the element to animate ...

How can I deal with it?
Thanks for help! 

 

My code: 

Gsap:

var t;
  $(window).scroll(function() {
  t = $(window).scrollTop();
  // console.log('scrolling! ' + t);
  TweenMax.to($(".divider-txt span"), 1, {
    y: -t / 7 + "px",
})

TweenMax.to($(".inner:nth-child(2n+1)"), 1, {
  ease: Power2.easeOut,
  y: -t / 20 + "px !important",
})


TweenMax.to($(".sticky-button"), 1, {
  ease: Power2.easeOut,
  y: t / 1 + "px !important",
})

TweenMax.to($(".footer"), 1, {
  ease: Power2.easeOut,
  y: -t / 7 + "px",
})


TweenMax.to($(".section"), 1, {
  ease: Power2.easeOut,
  y: -t + "px"
})

TweenMax.to($(".circles-mask.center"), 1, {
  ease: Power2.easeOut,
  rotation: -t / 16 + "px",
})

});

ScrollTrigger

gsap.registerPlugin(ScrollTrigger);

select = e => document.querySelector(e);
selectAll = e => document.querySelectorAll(e);

const titles = selectAll(".titles");
const captions = selectAll(".captions");
const images = selectAll(".images");

titles.forEach((title, i) => {   

    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: title,
            toggleActions: "play reset play reset",	  
            start:"top top",
            end:"+=100%",
        }
    });

    tl.from(title.querySelectorAll('.titlein'), {
        duration:.5, 
        opacity:0
    }, .5)
});	

images.forEach((image, i) => {   

    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: image,
            toggleActions: "play reset play reset",	  
            start:"top top",
            end:"+=100%",
        }
    });

    tl.from(image.querySelectorAll('.fader'), {
        duration:1, 
        opacity:0,
        
    }, .25)
});	

HML / CSS

.section{
  overflow-x: hidden;
  width:100%;
  max-width: 100%;
  will-change: transform;
  position: relative;
  z-index: 5;
}

<section class="section about">
  <div class="images">
  	<img class="fader" src="https://jackewilson.files.wordpress.com/2014/08/baldwin-latimes.jpeg" style="width:100%;">
  </div>
</section>

 

[GreenSock]

Welcome to the forums, @GGQa. 

 

If you'd like some help, please provide a minimal demo. I tried pasting your code into a CodePen and obviously there were a lot of things missing and console warnings. Please isolate the issue and we'd be happy to take a peek. 

See the Pen 753ed46801c608db0786a4b23b57a3eb?editors=1010 by GreenSock (@GreenSock) on CodePen

 

It looks like you're using the very old syntax, so I'd recommend reading the migration guide: https://greensock.com/3-migration

 

You don't need to wrap targets in $("...") either - jQuery is totally unnecessary. 

 

I noticed you're using a "scroll" event listener to do tweening which is a bad idea in most cases. I'm curious what exactly you're trying to do there. 

 

You'll significantly increase your chances of getting a good answer if you focus on only one issue at a time and you provide a minimal demo with only the absolutely essential code to see the problem. 

 

4 hours ago, GGQa said:

The problem is that when Gsap animates elements using 'transform' - the ScrollTrigger cannot find the element to animate ...

 I don't understand this comment. How did you come to this conclusion? 

 

In terms of calculating start/end scroll trigger points, yes, transforms are indeed factored in. 

[GGQa]

Hi @GreenSock. Thanks for the answer. My demo below, 

7 hours ago, GreenSock said:

I don't understand this comment. How did you come to this conclusion?

As u can see in my project, nothing happens with picture when u scroll. It has "Opacity: 0" all the time when I'm close to the element.

See the Pen ExmBzyX by GGQa (@GGQa) on CodePen

Edited August 19, 2021 by GGQa
Wrong codepen dress

[nico fonseca]

@GGQa you don't have any class with "titles" and "captions".

[GGQa]

Sorry, I forgot to remove this.

See the Pen ExmBzyX by GGQa (@GGQa) on CodePen

[nico fonseca]

With the images I think you have an issue with the trigger method. I set trigger: image[0] and it's working. 

[akapowl]

 

Also there is a 404 Error, because you have a lot of blank space in your image source.

 

<img class="fader"src="https://jackewilson.files.wordpress.com/2014/08/baldwin             latimes.jpeg">

 

Iit looks to me, like with the scroll eventListener you are using, you are introducing some sort of smooth-scrolling behaviour - that will throw things off. When I removed the on-scroll functionality of yours, the frame of the image became visible to me when hitting the top of the window as it should.

 

You would have to hook up your own smooth-scrolling approach to ScrollTrigger via .scrollerProxy() in some way - but as this can become quite tricky, I would probably recommend taking a look at the ScrollTrigger-native smooth-scrolling approach on that documentation page.

 

 

 

[GGQa]

Thank you @nicofonseca. Actually trigger: image[0] working good. 

But the answer @akapowl this is propably something I was looking for. I can't wait to test it. Thanks for your help and I'll come back with working exaple. 🔥

[GGQa]

As promised, I'm coming back with a working example: 

See the Pen ExmBzyX by GGQa (@GGQa) on CodePen

Thank u all for help! What do you think about this soultion?

[nico fonseca]

Nice @GGQa !

One small things:
- Try to remove Jquery scroll function (better if you remove all Jquery) and use them with ScrollTrigger

- Replace old GSAP syntax (TweenMax.to) with the newest.

- When you have an ID you can use getElementById()

[GGQa]

@nicofonseca thanks for tips. Have you any idea how to make h1 parallax effect based on scroll using ScrollTrigger? 

[akapowl]

 

🤔 Looks to me like you chose a smooth-scrolling approach from an older thread.

 

What I was actually referring to when I said ScrollTrigger-native smooth-scrolling was the example on the docs for the .scrollerProxy(), that I linked to.

 

This one here:

 

See the Pen gOgWELo by GreenSock (@GreenSock) on CodePen

 

 

I'd strongly recommend using that one instead, as it has a lot of things laid out for you already, e.g. it will save you a lot of headaches when it comes to pinning things.

 

In addition to what Nico said, you could in a next step try to exchange your scroll-function with ScrollTrigger, too.

Also be careful about your markup - it looks like you are missing a </div> closing tag. Sometimes you might not even notice in the final product - sometimes it can ruin your whole day.

 

  <section class="section issues">
    <h1>Issues section with parallax effect</h1>
    <div class="images">
  </section>

 

[GGQa]

Please take a look of this example. It's fine now? 

See the Pen ExmBzyX by GGQa (@GGQa) on CodePen

[akapowl]

50 minutes ago, GGQa said:

It's fine now?

 

Looks to me like it's working just fine, yes  

 

Edit:

For the replacement of you scroll-function for the paralax effect, you could utilize a scrubbing ScrollTrigger, @GGQa.

 

In this following example I loop over your h1s in a similar fashion as you do over the images and for each create a scrubbing ScrollTrigger that tweens the title from y: 100 to y: -100 over the course of the scroll.

 

I set the trigger element to be a div surrounding your h1, because if use an element as the trigger that you are going to tween on its y-translation, things can become tricky in some scenarios.

 

So in this example here, when the top of each .col.title surrounding a h1 hits the bottom of the viewport, the scrubbing of the tween will start and proceed until the bottom of the .col.title hits the top of the window.

 

I changed the backgrounds of the sections a bit so it becomes better visible.

 

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

 

 

 

Edit 2:

Going forth, when you want to make changes to your examples, it would be really appreciated if you could use codepen's fork-button and make the changes to the forks instead of the original pen you posted, so the context of this thread remains understandable for future readers  

 

[GGQa]

It just works great. Thanks friends! 🙂

[Cassie]

Great job team! 🥳