Jump to content
Search Community

Call a function within a parent function

Trang test
Moderator Tag

Recommended Posts

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...