Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'locomotive'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 5 results

  1. Hey everyone, I am trying to recreate this codepen. But I have a horizontal scrolling website. So its kinda tricky... This is what I have so far gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger); const scrollContainer = document.querySelector('.data-scroll-container'); const locoScroll = new LocomotiveScroll({ el: scrollContainer, direction: 'horizontal', smooth: true, /*lerp: 0.1,*/ /*touchMultiplier: 2.54,*/ reloadOnContextChange: true, tablet: { smooth: true, direction: 'horizontal', gestureDirection: 'both', }, smartphone: { smooth: true, direction: 'vertical', } }); window.onresize = function(){ location.reload(); } locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, scrollLeft(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x; }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). pinType: scrollContainer.style.transform ? "transform" : "fixed" }); window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetHeight ; let horizontalScrollLength = pinWrapWidth - window.innerHeight; gsap.to(".pin-wrap", { scrollTrigger: { scroller: scrollContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", onEnter:() => { console.log("Enter") }, pin: true, //horizontal: true, // anticipatePin: 1, start: "left center", end: pinWrapWidth }, /*y: -horizontalScrollLength, ease: "none"*/ }); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); }); I cant seem to find out why its not working. The structure of my DOM is similiar as in the codepen. Special is that I use Elementor as my base, but it should not have any affect on this. As attribute I do have data-section in each section, as its not working else... Hope someone can help me!!! ❤️ Cheers zoruak
  2. Hey guys, I wonder if you could give me some advice again I am using the Locomotive smooth scroll script (https://locomotivemtl.github.io/locomotive-scroll/), which gives my projects a beautiful buttery scroll effect but I need some help with playing GSAP animations along with this when the target element comes into view. You'll see in the Pen that when each block comes into view it has a class added "is-inview". It would be great if I could just have an animation play as soon as that class is added, and then reverse when that class is removed. Maybe something to keep looking for changes on the elements? Any ideas? Huge thanks as always! Andy
  3. When I add pin to element background of scroll is visible Here's my code: gsap.registerPlugin(ScrollTrigger); function gsapanim(){ const locoScroll = new LocomotiveScroll({ el: document.querySelector(".scrollContainer"), smooth: true }); // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(".scrollContainer", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). pinType: document.querySelector(".scrollContainer").style.transform ? "transform" : "fixed" }); // TIMELINE 1 const tl1 = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: '.header', start: "top top", end: "bottom 60%", scrub: 3, markers: false, id: 'header', pin: '.header', } }); tl1.to('.top__logo', { scale: 4, opacity: 1, ease: "none" }) const tlcs = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: '.header', start: "top top", end: "bottom 60%", scrub: 3, markers: false, pin: '.header', } }); tlcs.to('.top__smoke-child', { x: "-200%", opacity: 0, ease: "none", id: "header2" }) tl1.to('.top__logo', {scale: 5, opacity: 0, duration: 0.5}); tl1.to('.header', {opacity: 0, duration: 0.1}); tl1.to('.header', {display:"none", color: "black"}); // TIMELINE 2 const tl2 = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: ".section--main__ui_1", start: "-385px 28%", end: "999px 33%", markers: true, toggleActions: "restart none restart none", id: "tl2" } }); tl2.fromTo('.main__top_1', {opacity: 0}, {opacity: 1, duration: 1, delay: 1}) tl2.fromTo('.main__description_1', {opacity: 0}, {opacity: 1, duration: 1}) const tl3 = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: ".section--main__ui_2", start: "-385px 28%", end: "999px 33%", markers: true, toggleActions: "play restart restart none", id: "tl3", } }); tl3.fromTo('.main__top_2', {opacity: 0}, {opacity: 1, duration: 1, delay: 1}) tl3.fromTo('.main__description_2', {opacity: 0}, {opacity: 1, duration: 1}) // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); P.S: My container is also called "scrollContainer"
  4. Hi, im tying to use scrollProxy with locomotive like in the docs with Nextjs. Locomotive works fine but scrollTrigger its always at the initial position. It seams that the scrollTop inside the scrollerPoxy its not returning any value. I made a codesandbox to show the case: Scroll component: https://codesandbox.io/s/nextjs-gsap-locomotive-qq11t?file=/src/components/scroll.jsx Live demo: https://qq11t.sse.codesandbox.io/ I'm looking for a good way to implement a smooth-scroll in nextjs so if any have an alternative to locomotive and works with gsap it would help any way. Thx, for the support
  5. Hi, For my website I'm trying to use the code from snorkl.tv in order to have a smooth scroll : https://www.snorkl.tv/scrolltrigger-smooth-scroll/ I've created the div with a class="scrollContainer" and used the proxy method but I'm stucked. Because my timeline is broken. Here is a Pen of my code. https://codepen.io/_youri/pen/LYZxZPW Where am I wrong ? You should open the pen in a new window as my div have width bigger that the display in Pen !
×