Jump to content
GreenSock

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

Markers and ScrollTrigger not working

Recommended Posts

image.thumb.png.e55cbc23f22639a45810b693aa9e3a52.png

 

Hi guys, I am new to GSAP. I am stuck at ScrollTrigger. I tried using ScrollTrigger for t2 and t3. But it is not working and markers are also not showing up.

I tried both the ways for the markers also i.e. using true and {startColor: "green" , endColor: "red" , font-size: "12px"}. All the animations are getting activated on page load, I want them to load them when we scroll through that section. I have created timelines separately for each section. I am using https://cdnjs.com/libraries/gsap/3.3.2 for cdns.

Link to post
Share on other sites

Sounds like you forgot to load ScrollTrigger. Got a demo we could look at? It is just really hard to troubleshoot blind. We’d love to help. 

Link to post
Share on other sites

I have used the following code to load ScrollTrigger.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>	

and gsap.registerPlugin(ScrollTrigger); in my script file

 

 

 

Link to post
Share on other sites

We cannot help if we don’t have a reduced test case to look at. I am sure it is something simple. Can you provide one please?

Link to post
Share on other sites

Make sure you put your scripts at the end of the body tag so the DOM exists before you try manipulating it. 

Link to post
Share on other sites

Done that from the beginning. I have put console.log(timelines) and is attaching them here. Maybe that can help you figure out the problem. 

image.thumb.png.ec948929bc7b8c7a87207a2136d1b9c9.png

 

Link to post
Share on other sites

Here is another one.

image.png.32bc6761a84ac4533bd8d97ce97defac.png

 

const t3 = gsap.timeline({
    ease: 'Power4.easeOut',
    ScrollTrigger : {
        trigger: '.icon-placement',
        // markers: {startColor: "green", endColor: "red", fontSize: "12px"},
        marker:true,
        start: "top centre",
        scrub:true,
        }
    });
    console.log(t3);
    t3.from('.featureinfo' , { opacity:0 , x:-60 } , "+=0.40" )
    t3.from('.featurepara' , { opacity:0 , x:60})
    t3.from('.anim3l' , { opacity:0 , x:-50} , "+=0.10")
    t3.from('.anim3r' , { opacity:0 , x:50} , "-=0.10")
    t3.from('.phone-mid' , { opacity:0 , y:40})

 

Link to post
Share on other sites

Any idea about why markers are also not showing up ?

Link to post
Share on other sites

your markers are not showing up because you are using "marker" instead of "markers".

  • Like 2
Link to post
Share on other sites

Thanks @oligsap, got that working.

 scrollTrigger also worked by using ScrollTrigger.create()

Link to post
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.

×