Jump to content
GreenSock

andsavu

Members
  • Posts

    9
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

andsavu's Achievements

2

Reputation

  1. @noviedo, @akapowl Cheers guys! Thanks a lot for the help, exactly what I was looking for :).
  2. @ZachSaucier hey man! thanks for joining in. well, it's not much, I have a basic horizontall smooth scrollbar setup with 3 images, and I'm trying to add skew to them. here's a quick codepen I made up using the other example: https://codepen.io/andreitmm/pen/yLJwqby gsap.set(".item", {transformOrigin: "right center", force3D: true}); I set this to .item and in inspect element I get this: <div class="item" style="transform-origin: 100% 50%; transform: translate3d(0px, 0px, 0px);">Eaque ullam illum nobis deleniti mollitia unde, sed, nemo ipsa ratione ex, dicta aliquam voluptates! Odio vitae eum nobis dignissimos sunt ipsum repellendus totam optio distinctio. Laborum suscipit quia aperiam.</div> so I guess .item is targeted, but it's not moving at all? It's the same setup I have, with Smooth Scrollbar & a Horizontal Scroll Plugin.
  3. Hey guys, so I'm trying to combine 2 CodePens: https://cdpn.io/GreenSock/pen/eYpGLYL https://cdpn.io/idiotWu/pen/KJNYye basically, ScrollTrigger with a smooth scrollbar plugin, that actually works horizontally, lol. I've got ScrollTrigger working with the regular/vertical scroll, but this one page in my project is actually horizontal. Can anyone help me here? not sure what do I need to change to make it work? I'm adding code that I think it's relevant for this issue (I've got a Gatsby JS setup): class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin { static pluginName = 'horizontalScroll'; transformDelta(delta, fromEvent) { if (!/wheel/.test(fromEvent.type)) { return delta; } const { x, y } = delta; return { y: 0, x: Math.abs(x) > Math.abs(y) ? x : y, }; } } Scrollbar.use(HorizontalScrollPlugin, OverscrollPlugin /* you forgot this */); let bodyScrollBar = Scrollbar.init(document.querySelector('#my-scrollbar'), { overscrollEffect: 'bounce', alwaysShowTracks: true }); so this is how I made the horizontal scroll work and this is what I previously used for regular scroll: let scrollPositionX = 0, scrollPositionY = 0 bodyScrollBar.addListener(({ offset }) => { scrollPositionX = offset.x; scrollPositionY = offset.y; }); bodyScrollBar.setPosition(0, 0); gsap.registerPlugin(ScrollTrigger); ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; } }); bodyScrollBar.addListener(ScrollTrigger.update); } and then I just added that skew effect from the codepen. It's there, I see it in inspect element, but I guess it's not moving because its not recognizing any Y scroll/scrollTop?
  4. @mimoid-prog It's been a while since I worked on this but: import React, { useEffect } from "react"; import Header from "../components/header"; import Scrollbar from 'smooth-scrollbar'; import {TweenMax, TimelineLite, Power3} from 'gsap'; import gsap from 'gsap'; import ReactDOM from 'react-dom'; import { Component } from 'react'; import { ScrollTrigger } from "gsap/ScrollTrigger" export default function About() { useEffect(() => { const isSSR = typeof window === "undefined" if(!isSSR) { let scrollPositionX = 0, scrollPositionY = 0, bodyScrollBar = Scrollbar.init(document.querySelector('#my-scrollbar')); bodyScrollBar.addListener(({ offset }) => { scrollPositionX = offset.x; scrollPositionY = offset.y; }); bodyScrollBar.setPosition(0, 0); bodyScrollBar.track.xAxis.element.remove(); gsap.registerPlugin(ScrollTrigger); ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; } }); bodyScrollBar.addListener(ScrollTrigger.update); } }, []); useEffect(() => { gsap.to('body', 0, {css: {visibility: 'visible'}}); const tl = gsap.timeline(); tl.from('.line span',1.6, { y: 400,ease: Power3.easeOut,delay: .2,skewY: 7,stagger: { amount: 0.3 },}) .from('.line_small span',1.2, { y: 100,ease: Power3.easeOut, delay: .2,skewY: 7,stagger: { amount: 0.3 }}, .1) ; gsap.registerPlugin(ScrollTrigger); gsap.to('.image_float', { scrollTrigger: { trigger: '.h_trigger', start: '-100px top', end:'bottom top', scrub: .1, id: 'image-float' }, y: -50, ease: 'none', duration: 2 }); gsap.to('.line', { scrollTrigger: { trigger: '.h_trigger', start: '-100px top', end:'center top', scrub: .1, id: 'lines' }, y: -50, ease: 'none', duration: 2 }); }, []) return ( sorry, I've got some other things there but I guess this is it: useEffect(() => { const isSSR = typeof window === "undefined" if(!isSSR) { let scrollPositionX = 0, scrollPositionY = 0, bodyScrollBar = Scrollbar.init(document.querySelector('#my-scrollbar')); bodyScrollBar.addListener(({ offset }) => { scrollPositionX = offset.x; scrollPositionY = offset.y; }); bodyScrollBar.setPosition(0, 0); bodyScrollBar.track.xAxis.element.remove(); gsap.registerPlugin(ScrollTrigger); ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; } }); bodyScrollBar.addListener(ScrollTrigger.update); } }, []); and don't forget this: gsap.registerPlugin(ScrollTrigger);
  5. Yeah, that was exactly it. It's working well now, thanks a lot guys!
  6. Just updated to 3.4.2, is this the latest? I got this now.
  7. Hmm I tried that but I'm getting: anything I'm missing here? Thanks for taking the time!
  8. Hey guys, so I started playing with GSAP & Scroll Trigger and I really liked it and the animations are super smooth, but I've been also using this plugin Smooth Scrollbar ( https://idiotwu.github.io/smooth-scrollbar/ ) for a while and I wanted to add it to this new project as well, but it doesn't work. I was hoping maybe you guys can help a bit here? I don't have a codepen sadly but I've got some bits of code: I've got my page wrapped in these 2 divs, .scrollable is used to initialize Smooth Scroller <div className="scrollable" data-scrollbar> <div className="wrap-overflow"> .scrollable { width:100vw; height:100vh; overflow: auto; } .wrap-overflow { position: relative; overflow: hidden; height:100%; } gsap.registerPlugin(ScrollTrigger); gsap.to('.image_float', { scrollTrigger: { trigger: '.h_trigger', start: '-100px top', scroller: '.wrap-overflow', end:'bottom top', scrub: 1, markers: true, id: 'image-float' }, y: -200, ease: 'none', duration: 10 }); useEffect(() => { const isSSR = typeof window === "undefined" if(!isSSR) { Scrollbar.initAll(); } }, []); while .wrap-overflow is the scroller I tried using. I don't think it can work without a custom scroller, because: .scrollable has only 100vh height (750px on my screen) and .scroll-content has the actual height of the page (around 3300px) - this is how Smooth Scroller works/needs to work. My guess here is that somehow GSAP is listening to the browsers default scrollbar, that isn't scrolling at all, because it is 'overlapped' by the Smooth Scroller scrollbar? Hope I'm not crazy, it's pretty late where I live, lol. Anyways, hopefully I explained this well enough, not sure if this is/should be your expertise anyhow (using third-party plugins with Scroll Trigger). I can take the answer that these two can't simply work together, but I'd really appreciate any ideas that can make it happen tho. Oh, btw, this is what I got (the Smooth Scroller works but the animation isn't 😞
  9. So I'm trying to recreate 2 effects that I saw on this awesome website: https://jesperlandberg.dev/ https://jesperlandberg.dev/about 1. is the 'page transition' effect when you press on profile, theres that white overlay that slides top with a warp/distortion 2. while on Profile, when you hover on a link you get that 3d text underline effect. How are these made and how are these so smooth? Anyone can offer some guidance, examples with similar effects? Thanks in advance! Really appreciate it! p.s.: I made this codepen with some basic css, its obviously not that smooth/jiggly but yeah..
×