Hi greensock forum,
I try to implemented a scroll trigger SVG path on scroll animation example: https://codepen.io/GreenSock/pen/rNOBLBV
(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);
});
//////////////////////////////////////////////////////////////////////////////