Jump to content
Search Community

GSAP scrolll markers are above the trigger element

SagarSurendhrababu test
Moderator Tag

Recommended Posts

Hello,

 

I have one timeline animation and below there is scrollTrigger code also.. when i remove rimeline animation code then markers are placed correct pn trigger element but when i place timeline code back then scroll marker showing above the trigger element..dont know why? i have pasted my code below 
 

// slider animation timeline
gsap.timeline()
.from(".header",{height:0duration:1.5ease:"back"})
.from(".sliderText",{scale:1.5duration:1ease:"back"opacity:0},"<.5")
.from(".smallIsland",{scale:.1duration:1ease:"back"opacity:0},"<.5")
.to(".smallIsland",{y:15repeat:-1duration:3yoyo:true},"<.5")
.from(".gramedisland",{scale:.1duration:1ease:"back"opacity:0},"<.5")
.to(".gramedisland",{y:20repeat:-1duration:3yoyo:true},"<.5")
.from(".waterFlow",{duration:1ease:"back"opacity:0},"<.5")
.from(".plane",{x:300duration:1ease:"back"opacity:0},"<.5")
.from(".nav",{y:-100duration:1ease:"back"opacity:0})
.fromTo(".stone",{opacity:0},{duration:1opacity:1},"<.5")
.to(".stone",{duration:3y:150rotate:30repeat:-1scale:.8},"<.5")
.to(".plane",{y:15rotation:-5repeat:-1duration:3yoyo:true},"<.5");
 
// scrolling effect
let featureWidth = gsap.getProperty(".featuredBox""width");    
gsap.from(".featuredBox",{
    x:featureWidth,
    duration:3,
    scrollTrigger:{
        trigger:".featuredBox",
        markers:true,
        start:"top center",
        end:"bottom center"
    }    
    });


 
Link to comment
Share on other sites

Hello @SagarSurendhrababu - welcome to the GSAP forum.

 

unfortunatelly it is close to impossible to give you any advice from just a code-snippet of your JS code - that's why, as you'll find in the forum guidelines, we ask for a minimal demo that showcases your issue in a reduced scenario.

 

One first step for you to get closer to the culprit causing your problems could be removing things tween by tween from your timeline to isolate what exactly is causing it - my best guess would be that you are tweening things from a height of 0 to your set height and that might throw the calculations off for the ScrollTrigger - but this is just a shot in the dark and it could really be anything else, maybe related to your HTML markup or the CSS setup.

 

So if you'd like some assistance on this, please create a minimal demo for us to take a look at and tinker with, ideally on a platform as codepen.io

 

  • Like 3
Link to comment
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.
×
×
  • Create New...