Search the Community
Showing results for tags 'horizontal scrolling'.
-
I'm quite new to gsap. I now understand how to use useGSAP, but today I tried to create a horizontal scrolling section. I want the whole site to be scrolled vertically but only one section to be scrolled horizontally, similar to gsap.com Why doesnt this work? "use client"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; import { useRef } from "react"; export default function ProcessSection() { const container = useRef(null); const animationRef = useRef(null); useGSAP( () => { const sections = document.querySelectorAll(".panel"); gsap.to(".panel", { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: animationRef.current, pin: true, scrub: 1, snap: 1 / (sections.length - 1), end: () => "+=" + animationRef.current?.offsetWidth, }, }); }, { scope: container } ); return ( <section className="w-full overflow-x-hidden" ref={container}> <div className="flex h-screen w-[400%] flex-nowrap bg-background-secondary opacity-0" ref={animationRef} > <div className="panel flex h-full flex-grow bg-green-500"></div> <div className="panel flex h-full flex-grow bg-red-500"></div> <div className="panel flex h-full flex-grow bg-yellow-500"></div> <div className="panel flex h-full flex-grow bg-purple-500"></div> </div> </section> ); }
- 4 replies
-
- next.js
- horizontal scrolling
-
(and 1 more)
Tagged with:
-
Navigation links not ending up on exact location of section when horizontal scrolling is used
Cessy posted a topic in GSAP
I've implemented a horizontal scrolling feature using GSAP. However, when I click on a link in the nav, it does not link me to the exact location of each section. Here's the website I've made: https://southfield-center.webflow.io/ Here's the GSAP code I used: <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="https://unpkg.com/gsap@3/dist/ScrollToPlugin.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); function getScrollLookup(targets, { start, pinnedContainer, containerAnimation }) { let triggers = gsap.utils.toArray(targets).map((el) => ScrollTrigger.create({ trigger: el, start: start || "top top", pinnedContainer: pinnedContainer, refreshPriority: -10, containerAnimation: containerAnimation, }) ); return (target) => { let t = gsap.utils.toArray(target)[0]; let i = triggers.length; while (i-- && triggers[i].trigger !== t) {} if (i < 0) { return console.warn("target not found", target); } return containerAnimation ? st.start + (triggers[i].start / containerAnimation.duration()) * (st.end - st.start) : triggers[i].start; }; } // Function to initialize the scroll animation function initScrollAnimation() { let sections = gsap.utils.toArray(".section"), navLinks = document.querySelectorAll(".gsap-code"), nav = document.querySelectorAll(".nav"), getMaxWidth = () => { let width = 0; sections.forEach((section) => { const rect = section.getBoundingClientRect(); width += rect.width; console.log(`Section ${section.id} width: ${rect.width}`); }); return width; }, maxWidth = getMaxWidth(), scrollSpeed = 16, snapProgress, lastScrollTween = Date.now(), curIndex = 0, tl = gsap.timeline(); tl.to(sections, { x: () => window.innerWidth - maxWidth, duration: 1, ease: "none", }); ScrollTrigger.create({ animation: tl, trigger: ".scrollable-div", pin: true, scrub: 1, invalidateOnRefresh: true, }); function init() { gsap.set(sections, { x: 0 }); maxWidth = getMaxWidth(); let position = 0, distance = maxWidth - window.innerWidth; tl.add("label0", 0); sections.forEach((section, i) => { let progress = position; const rect = section.getBoundingClientRect(); position += rect.width / distance; tl.add("label" + (i + 1), position); if (i < navLinks.length) { navLinks[i].onclick = () => { snapProgress = progress; lastScrollTween = Date.now(); curIndex = i; gsap.to(window, { scrollTo: maxWidth / scrollSpeed * progress, duration: 1, overwrite: "auto" }); }; } }); } init(); ScrollTrigger.addEventListener("refreshInit", init); ScrollTrigger.create({ trigger: ".section_about", start: "top top", onToggle: (self) => { if (self.isActive) { gsap.set(nav, { display: "flex" }); } else { gsap.set(nav, { display: "none" }); } }, }); let getPosition = getScrollLookup(".section", { start: "center center", containerAnimation: tl, }); navLinks.forEach((link) => { link.onclick = (e) => { e.preventDefault(); let target = e.target.getAttribute("href"); gsap.to(window, { scrollTo: getPosition(target), duration: 1, overwrite: "auto" }); }; }); } if (window.innerWidth >= 992) { initScrollAnimation(); } </script> -
How to add fade in/fade out effects to pinned horizontal scroll animation?
Laurence posted a topic in GSAP
Hi, I'm struggling to create a fade in/out animation to a pinned section using GSAP's horizontal scroll. What I'm trying to do is to fade in/out between sections, mainly the content and the background or an image inside each sections. I tried using this code function: function setSection(newSection) { if (newSection !== currentSection) { var tl = gsap.timeline(); tl.to(".col-fade", { y: -30, autoAlpha: 0, duration: 0.3 }); tl.to(currentSection, { autoAlpha: 0, duration: 0.5 }); var tl = gsap.timeline(); tl.to(newSection, { autoAlpha: 1, duration: 0.5 }); tl.to(".col-fade", { y: -30, autoAlpha: 1, duration: 0.3 }); currentSection = newSection; } } and set it to gsap.to(sections, {}); function like this: gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, scrub: 1, snap: 1 / (sections.length - 1), end: () => "+=" + document.querySelector(".container").offsetWidth }, onToggle: (self) => self.isActive && setSection(sections) }); However, it doesn't seem to have an effect. Any Idea why I'm not able to successfully solve the issue? I'm still learning GSAP`s up to this point. Any ideas would be a great help. Thanks a lot.- 1 reply
-
- gsap
- animations
-
(and 1 more)
Tagged with:
-
Hi I'm trying to replicated the transitions on this pages sections http://cuberto.com using TweenMax. var slides=document.querySelectorAll('.slide'); var tl=new TimelineLite({paused:true}); for(var i=slides.length;i--;){ var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i; D.addEventListener('click',function(){ tl.seek(this.id).pause() }); document.getElementById('Dots').appendChild(D); tl.add('Dot'+i) if(i>0){ if(i!=slides.length-1) { tl.addPause() } tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut}) .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0) .set(slides[i],{ background: "none"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3) .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i) .set(slides[i],{zIndex:1-i}) .set(slides[i-1],{zIndex:slides.length}) .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6) .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6) }; }; full code at codepen can be found here I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation. I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing. However I am getting in an awful mess with the scroll event firing an animation on all the slides. I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery. I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for. I could really do with a a resolution I can go to my client with, or at least a direction I could go in. Thanks javascript jquery horizontal-scrolling gsap pagepiling.js shareeditdeleteflag asked 4 mins ago DansBananaLoafcake 62 add a comment
- 10 replies
-
- tweenmax
- horizontal scrolling
-
(and 3 more)
Tagged with:
-
Hi, how can i create anchor links for a horizontal scrolling? My version is not working correctly: $(".menu-item").on("click", function (event) { event.preventDefault(); var id = $(this).attr('href'); var left = $(id).offset().left; $('body,html').animate({ scrollTop: left }, 1500); });
- 6 replies
-
- gsap
- horizontal scrolling
-
(and 3 more)
Tagged with:
-
Hello! I'm trying to apply an animation to the same element in different time lines. But it works in jumps - without a smooth transition between the states of the element. I have a task to do animation with many elements inside one screen. I have several scenes that need to be run by scrolling or clicking on the menu. Under the link all works approximately, as it is necessary to me. One problem is that the animation does not go smoothly from the first state to the second state and then to the third. https://codepen.io/yuliarushay/pen/PBjeyN Thanks!
- 34 replies
-
- tweenmax
- horizontal scrolling
-
(and 3 more)
Tagged with: