Trang Posted March 16, 2022 Share Posted March 16, 2022 Hi, MAIN TWEEN I've used GSAP Scroll Trigger to trigger a SVG (.ufo) to tween across the screen, left to right, only after the user has scrolled to bottom of page. It seems to work fine: gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(MotionPathPlugin); gsap.set(".ufo", {x: -500}); gsap.to(".ufo", { scrollTrigger:".ufo", x:2000, duration:6, motionPath:{ path:"M-80,20 c300,50 600,30 2000,-180", autoRotate:true } }); LASER BEAM The 'ufo' fires a laser beam using a 'rays' layer in the SVG. The 'rays' layer should initially be invisible, but flash for an instant as the 'ufo' completes its tween. I've managed to do this with the following code: gsap.set("#rays", {opacity:0}); gsap.to("#rays", 0.1, {autoAlpha:1, repeat:1, delay:0.7, yoyo:true, ease: Linear.easeNone}, 0); PROBLEM My problem is: The ScrollTrigger works fine but doesn't fire the 'rays' layer. If I refresh the page while I am already at the bottom of page, the laser beam ('rays') works (flashes for an instant) but this doesn't work in conjunction with the ScrollTrigger. It seems to me I may have to call a 'rays' function from within the ScrollTrigger function but I can't work out how to do this (have checked docs. but still can't work it out). Also, I've tried to set up my CodePen to mirror the set up in my original HTML page but I'm not sure it works exactly the same way. Sorry. Hoping someone can point me to how to restructure my code to get ScrollTrigger and flash of laser beam ('#rays') to work together. Many thanks. See the Pen ExojJVq by Ben10 (@Ben10) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted March 16, 2022 Share Posted March 16, 2022 Hi Tang, You should probably use a timeline if you want to coordinate stuff like that. The way you have it right now, the rays are not hooked up to a ScrollTrigger and will play immediately. See the Pen oNpjvMy by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Trang Posted March 16, 2022 Author Share Posted March 16, 2022 Hi, Thanks. Much appreciated. Works perfectly. I did attempt to set up a timeline but couldn't get it working - poor coding skills on my part. Once again, Thanks! 1 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