Jump to content
GreenSock

think

scrollTrigger.refresh()

Go to solution Solved by Cassie,

Recommended Posts

Hi greensock forum,
I try to implemented a scroll trigger SVG path on scroll animation example:

(WIll be replaced by an own animation later)

Due to it is integrated in a wordpress page, I can't replicate it on a codepen: http://wordpress.p462086.webspaceconfig.de/

 

PROBLEM:

  • After first DOMContentLoaded the scroller does not know the height of the content.
  • when resizing the window, it works

 

APPROACH:

I try to force ScrollTrigger.refresh(); like suggested in this thread:

gsap.delayedCall(0.01, ScrollTrigger.refresh);
But I don't know where to place the call.
Could you please give me a hint?

 

CODE EXAMPLE:

//////////////////////////////////////////////////////////////////////////////////////////////////

document.addEventListener("DOMContentLoaded", function() {

 

gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin, MotionPathPlugin);
gsap.defaults({ease: "none"});

const pulses = gsap.timeline({
  defaults: {
    duration: 0.05,
    autoAlpha: 1,
    scale: 2,
    transformOrigin: 'center',
    ease: "elastic(2.5, 1)"
  }})
.to(".ball02, .text01", {}, 0.2)
.to(".ball03, .text02", {}, 0.33)
.to(".ball04, .text03", {}, 0.46)

const main = gsap.timeline({defaults: {duration: 1},
  scrollTrigger: {
    trigger: "#svg",
    scrub: true,
    start: "top center",
    end: "bottom center",
    id: "svg",
    markers: true
    
  }})

 
.to(".ball01", {duration: 0.01, autoAlpha: 1})
.from(".theLine", {drawSVG: 0}, 0)
.to(".ball01", {motionPath: {path: ".theLine", align:".theLine", alignOrigin: [0.5, 0.5], }}, 0)

 

.add(pulses, 0);

 

});

//////////////////////////////////////////////////////////////////////////////

 

 

See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

  • Solution

Hey there @think!

Your scrollTrigger needs to be added after all the content is in the DOM as it needs to do measurements. If you're in wordpress land, you don't really have complex lifecycle events, so the likelihood is that you're maybe trying to add the JS in the head instead of after the body?

If not, you'll need to work out what's causing your GSAP JS to run before the page is fully structured, maybe you have some JS that's adding content? 

When you know that you can add a scrollTrigger.refresh() at that point. If you really can't puzzle it out a delayed call would also work, it won't be bulletproof though as you don't know how long the previous JS will run for and when exactly the DOM will be ready. A delayed call is just a guess really, sticky tape over the issue.

The best bet is to get your scripts in the right order or find out what's causing the issue in the first place.

  • Like 3
Link to comment
Share on other sites

Hi Cassie,
thank you so much for your reply! Your guidance was very helpful. Your my hero for today!

  • my .css files are placed in head, the .js files in footer section
  • on the wordpress/elementor page is also a swiper which loads posts. In the css the height was defined as 100%
  • if the ScrollTrigger is underneath the swiper, he needs the swiper height before the content is loaded.
    Defining the height in css solved this problem for me.
  • a callback afterInit the swiper to update the scroll trigger didn't help because the content isn't loaded at that point

 

greetings, Torsten

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.
×