Jump to content
Search Community

Akarsh

Members
  • Posts

    7
  • Joined

  • Last visited

Posts posted by Akarsh

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

     

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

     

     

     

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

×
×
  • Create New...