Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dancingrobots

Scrolltrigger: How to Activate Function without GSDevTools

Go to solution Solved by Carl,

Recommended Posts

I'm working my way through @Carl's creative coding club and have started combining code from the lessons as part of a larger project.

 

I'm able to animate split text via scrolltrigger but I am unable to do so without including GSDevTools which generates a playhead at the bottom of the page. I've tried removing "GSDevTools.create({animation:tl})" and calling the animation strictly through ScrollTrigger but this breaks.

 

Any help would be greatly appreciated. Thank you.

 

function init() {
  gsap.set("#block-load", { autoAlpha: 1 });
  split.lines.forEach((line, index) => {
    let chars = new SplitText(line, { type: "chars" });
    tl.from(
      chars.chars,
      { duration: 0.3, yPercent: 100, stagger: 0.04 },
      ">-50%"
    );
  });
  ScrollTrigger.create({
  start: "center 85%",
  end: "top top",
  markers: true,
  animation: tl,
  trigger: "#block-load"
});

  GSDevTools.create({animation:tl})
}

 window.addEventListener("load", init)

 

 

See the Pen OJjNEOO by lvl12sealclubber (@lvl12sealclubber) on CodePen

Link to comment
Share on other sites

  • Solution

great to see you applying what you learned in the courses to your own projects!

 

I didn't have any trouble removing the GSDevTools line.

 

However, I don't think you want that position parameter of ">-50%"

 

see if this works for you

 

See the Pen JjyXmXg?editors=0010 by snorkltv (@snorkltv) on CodePen

 

for others watching. the animation in question was the text "testing testing testing" near the bottom.

it seems like it is being triggered properly now

  • Like 2
Link to comment
Share on other sites

Thank you! Greensock is a lot to handle for a newbie like me but your courses are a great help.

 

Thanks again!

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