Jump to content
GreenSock

Trang

Call a function within a parent function

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

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

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!

  • Like 1
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.
×