hello, I do not know why but scrolltriger does not work

Eylon · March 16, 2022

hello, I do not know why but scrolltriger does not work:

I signed up for the guide on the site,
I work in a typewriter vs and that's the code I wrote down:

But the animation does not work

thanks for ths help

html & js:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>

Every Website

</h1>

Scroll Down

</div>

</section>

<h2>Introduction</h2>

<p>Morbi accumsan at enim ac rhoncus. Maecenas ut porttitor est. Aliquam nec ultrices nibh, et hendrerit nunc. Sed quis metus pretium, varius risus sit amet, ultrices enim. Sed vehicula diam purus, id euismod nunc porta sit amet. Etiam vitae eleifend nisi.</p>

<p>Phasellus aliquam sapien arcu, vel elementum lectus volutpat eu. Morbi ac nibh ut turpis lobortis laoreet. Phasellus hendrerit finibus lorem, et condimentum eros vehicula convallis. Cras lobortis risus quis nibh euismod, vel mollis odio suscipit. Vivamus vel auctor dolor, id vestibulum erat. </p>

<p>Duis in lectus nec urna semper sollicitudin. Pellentesque sed magna vitae urna iaculis ullamcorper eu non dui. Vestibulum vel enim sed lacus semper ultricies. Fusce eu viverra nibh. Integer vitae ornare odiocurae;</p>

</div>

</div>

<h2>Conclusion</h2>

<p>Morbi accumsan at enim ac rhoncus. Maecenas ut porttitor est. Aliquam nec ultrices nibh, et hendrerit nunc. Sed quis metus pretium, varius risus sit amet, ultrices enim. Sed vehicula diam purus, id euismod nunc porta sit amet. Etiam vitae eleifend nisi.</p>

<p>Phasellus aliquam sapien arcu, vel elementum lectus volutpat eu. Morbi ac nibh ut turpis lobortis laoreet. Phasellus hendrerit finibus lorem, et condimentum eros vehicula convallis. Cras lobortis risus quis nibh euismod, vel mollis odio suscipit. Vivamus vel auctor dolor, id vestibulum erat. </p>

<p>Duis in lectus nec urna semper sollicitudin. Pellentesque sed magna vitae urna iaculis ullamcorper eu non dui. Vestibulum vel enim sed lacus semper ultricies. Fusce eu viverra nibh. Integer vitae ornare odiocurae;</p>

</div>

<h2>Footer</h2>

<p>Morbi accumsan at enim ac rhoncus. Maecenas ut porttitor est. Aliquam nec ultrices nibh, et hendrerit nunc. Sed quis metus pretium, varius risus sit amet, ultrices enim. Sed vehicula diam purus, id euismod nunc porta sit amet. Etiam vitae eleifend nisi.</p>

<p>Phasellus aliquam sapien arcu, vel elementum lectus volutpat eu. Morbi ac nibh ut turpis lobortis laoreet. Phasellus hendrerit finibus lorem, et condimentum eros vehicula convallis. Cras lobortis risus quis nibh euismod, vel mollis odio suscipit. Vivamus vel auctor dolor, id vestibulum erat. </p>

<p>Duis in lectus nec urna semper sollicitudin. Pellentesque sed magna vitae urna iaculis ullamcorper eu non dui. Vestibulum vel enim sed lacus semper ultricies. Fusce eu viverra nibh. Integer vitae ornare odiocurae;</p>

</div>

</body>

</html>

js:

gsap.registerPlugin(ScrollTrigger)

gsap.from(".herman", {

duration:3, x:"-50vw", rotation:-360, ease:"linear",

scrollTrigger: {

trigger:".herman",

markers:true,

start:"top 75%",

end:"bottom 25%"

}

})

indx.html main.js

style.css

OSUblake · March 16, 2022

Hi Eylon,

There's a known regression in the latest version of ScrollTrigger when doing from animations, so you need to add lazy: false to them.

gsap.from(".herman", {
  duration: 3,
  x: "-50vw",
  rotation: -360,
  ease: "linear",
  lazy: false, // add this
  scrollTrigger: {
    trigger: ".herman",
    markers: true,
    start: "top 75%",
    end: "bottom 25%"
  }
});

Eylon · March 17, 2022

thanks!

Notifications

Messages

hello, I do not know why but scrolltriger does not work

Recommended Posts

Eylon

Link to comment

Share on other sites

OSUblake

Link to comment

Share on other sites

Eylon

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members