SagarSurendhrababu
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by SagarSurendhrababu
-
-
I went through this page .scrollerProxy() documentation page but the video didn't make sense to me so I need support about smooth scrolling GSAP code.. I did grab code from Demo (native ScrollTrigger) but its not working. Here i am struggling to understand its concept and code
-
Hello, I just grab the code from smooth scrolling doc and tried but its not working please give me solution...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Scrolling</title><style>.box.active {background-color: blue;}
body {background-color: #111;background-image:linear-gradient(rgba(255,255,255,.07) 2px, transparent 2px),linear-gradient(90deg, rgba(255,255,255,.07) 2px, transparent 2px),linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;}.box {width: 100px;height: 100px;background-color: #28a92b;position: absolute;left: 100px;z-index: 100;line-height: 100px;font-size: 50px;text-align: center;}.a {top: 200px;background-color: #8d3dae;}.b {top: 600px;}.c {top: 1000px;background-color: #e26c16;}.ghost {top: 1000px;background-color: #444;}.line {width: 2px;height: 3000px;position: absolute;left: 600px;top: 0px;/* visibility: hidden; */background-color: #777;}</style></head><body><div class="box a">a</div><div class="box b">b</div><div class="box c">c</div><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script><script>// Smooth scroll setupconst bodyScrollBar = Scrollbar.init(document.body, { damping: 0.1, delegateTo: document });bodyScrollBar.setPosition(0, 0);bodyScrollBar.track.xAxis.element.remove();// How to get them to work togetherScrollTrigger.scrollerProxy("body", {scrollTop(value) {if (arguments.length) {bodyScrollBar.scrollTop = value;}return bodyScrollBar.scrollTop;}});// You can use a ScrollTrigger in a tween or timelinegsap.to(".b", {x: 400,rotation: 360,scrollTrigger: {trigger: ".b",start: "top center",end: "top 100px",scrub: true,markers: true,id: "scrub"}});</script></body></html> -
Hello Akapowl,
Instead of height I used "y" value. Now its working.. Thanks once again your instant support.. GSAP such a rocking stuff..- 3
-
Hello Akapowl,
Your guess work was perfect.... i removed that tweening after that its working.. what property should I use for height ? -
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 timelinegsap.timeline().from(".header",{height:0, duration:1.5, ease:"back"}).from(".sliderText",{scale:1.5, duration:1, ease:"back", opacity:0},"<.5").from(".smallIsland",{scale:.1, duration:1, ease:"back", opacity:0},"<.5").to(".smallIsland",{y:15, repeat:-1, duration:3, yoyo:true},"<.5").from(".gramedisland",{scale:.1, duration:1, ease:"back", opacity:0},"<.5").to(".gramedisland",{y:20, repeat:-1, duration:3, yoyo:true},"<.5").from(".waterFlow",{duration:1, ease:"back", opacity:0},"<.5").from(".plane",{x:300, duration:1, ease:"back", opacity:0},"<.5").from(".nav",{y:-100, duration:1, ease:"back", opacity:0}).fromTo(".stone",{opacity:0},{duration:1, opacity:1},"<.5").to(".stone",{duration:3, y:150, rotate:30, repeat:-1, scale:.8},"<.5").to(".plane",{y:15, rotation:-5, repeat:-1, duration:3, yoyo:true},"<.5");// scrolling effectlet featureWidth = gsap.getProperty(".featuredBox", "width");gsap.from(".featuredBox",{x:featureWidth,duration:3,scrollTrigger:{trigger:".featuredBox",markers:true,start:"top center",end:"bottom center"}});
Smooth Scrolling not working
in GSAP
Posted
I am sorry , i forgot to copy code for you