rotation and zindex is not working

[omkar]

i want to rotate on shoe and  zindex on blue backgroud  but rotation not working and zindex in delayed  and dont know why scrub is not working in codepen in website it is working

See the Pen bGmrYGv by omkarcode (@omkarcode) on CodePen

[Rodrigo]

Hi,

 

The toggleActions config string goes in the scrollTrigger config object, not in the tween config object:

// Won't work
parallaxt2.to('#Layer_1', {
  rotationX: 90,
  toggleAction: 'play none none reverse',
  transformOrigin: "bottom 50%"
})

// Will Work
let parallaxt2 = gsap.timeline({
  ease: 'none',
  scrollTrigger: {
    trigger: '#topaddedsectionshoeimg',
    start: 'center center',
    end: 'bottom center',
    scrub: true,
    toggleAction: 'play none none reverse',
  }
});

Also the reason your codepen wasn't working is because you have the link for the GSAP Core file but not for ScrollTrigger. Is better to add those links in the codepen's JS configuration section:

 

Finally I created a fork of your codepen that seems to work the way you intend:

See the Pen WNaEdRb by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[omkar]

Sometime z-Index is delayed because of that blue backgroud is come of img for some millisecond and while resize page marker(start and end points) shifts little bit because of that animation appers bit early than expected 

[Rodrigo]

Hi,

 

Sorry I don't follow your last post at all. Are you still having issues? If so, please create a minimal demo or fork the last one I provided and be as specific as you can about it.

 

Happy Tweening!

[omkar]

code that you  provided that have same problem Sometime(rarely) z-Index is delayed because of that blue backgroud is come on img for some millisecond.

[Rodrigo]

Hi,

 

As I mentioned before I'm having a hard time following what you're trying to do. Please be specific about what you're trying to do, what the issue is and provide a minimal demo. Without a demo and vague description, there is almost nothing we can do to help you.

 

Happy Tweening!