GGQa Posted August 18, 2021 Share Posted August 18, 2021 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> Link to comment Share on other sites More sharing options...
GreenSock Posted August 19, 2021 Share Posted August 19, 2021 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. 3 Link to comment Share on other sites More sharing options...
GGQa Posted August 19, 2021 Author Share Posted August 19, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
nico fonseca Posted August 19, 2021 Share Posted August 19, 2021 @GGQa you don't have any class with "titles" and "captions". Link to comment Share on other sites More sharing options...
GGQa Posted August 19, 2021 Author Share Posted August 19, 2021 Sorry, I forgot to remove this. See the Pen ExmBzyX by GGQa (@GGQa) on CodePen 1 Link to comment Share on other sites More sharing options...
nico fonseca Posted August 19, 2021 Share Posted August 19, 2021 With the images I think you have an issue with the trigger method. I set trigger: image[0] and it's working. 3 Link to comment Share on other sites More sharing options...
akapowl Posted August 19, 2021 Share Posted August 19, 2021 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. 5 Link to comment Share on other sites More sharing options...
GGQa Posted August 19, 2021 Author Share Posted August 19, 2021 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. 🔥 2 Link to comment Share on other sites More sharing options...
GGQa Posted August 20, 2021 Author Share Posted August 20, 2021 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? 2 Link to comment Share on other sites More sharing options...
nico fonseca Posted August 20, 2021 Share Posted August 20, 2021 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() 4 Link to comment Share on other sites More sharing options...
GGQa Posted August 20, 2021 Author Share Posted August 20, 2021 @nicofonseca thanks for tips. Have you any idea how to make h1 parallax effect based on scroll using ScrollTrigger? Link to comment Share on other sites More sharing options...
Solution akapowl Posted August 20, 2021 Solution Share Posted August 20, 2021 🤔 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> 4 Link to comment Share on other sites More sharing options...
GGQa Posted August 20, 2021 Author Share Posted August 20, 2021 Please take a look of this example. It's fine now? See the Pen ExmBzyX by GGQa (@GGQa) on CodePen 1 Link to comment Share on other sites More sharing options...
akapowl Posted August 20, 2021 Share Posted August 20, 2021 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 4 1 Link to comment Share on other sites More sharing options...
GGQa Posted August 20, 2021 Author Share Posted August 20, 2021 It just works great. Thanks friends! 🙂 3 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 20, 2021 Share Posted August 20, 2021 Great job team! 🥳 5 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now