Markers and ScrollTrigger not working

[Akarsh 0 Likes (Newbie)]

 

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.

[GreenSock 12,790 Likes (Superhero)]

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. 

[Akarsh 0 Likes (Newbie)]

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

 

 

 

[GreenSock 12,790 Likes (Superhero)]

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?

[GreenSock 12,790 Likes (Superhero)]

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

[Akarsh 0 Likes (Newbie)]

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. 

 

[Akarsh 0 Likes (Newbie)]

Here is another one.

 

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})

 

[Akarsh 0 Likes (Newbie)]

Any idea about why markers are also not showing up ?

[oligsap 9 Likes (Newbie)]

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

[Akarsh 0 Likes (Newbie)]

Thanks @oligsap, got that working.

 scrollTrigger also worked by using ScrollTrigger.create()

[Brittany@Decisely 5 Likes (Newbie)]

I was having this problem yesterday. It seemed to have been an issue with the gsap.min.js file. I pulled the js from here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js and it started working.

[Akarsh 0 Likes (Newbie)]

@Brittany@Decisely Thanks, will try this also.