Jump to content
GreenSock

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

Search the Community

Showing results for tags 'scrolltriggerproxy'.

  • 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 9 results

  1. Whenever you scroll I am making a function to play the video. The video is playing rough, how can I play it smoothly? I think I should use "scrollerProxy", but I don't know how to apply it.
  2. Hey all! First of all, I am designer learning some dev style fighting and I am amazed how many possibilities gsap gives, I was a guy with job related mid-life crisis and gsap allowed me to find enjoyment and excitement, just as 15 years ago when I was just starting my design journey Thanks to everyone that participated and contributed to GSAP! I decided to fight with my portfolio as this was perfect opportunity to practice coding and GSAP animations. My issue is - I've been learning three-js with one of the courses available in the net there and wanted to use it when building my portfolio. There's a part in the course when the author shares his custom scroll code (which is needed to sync positions of meshes in webgl canvas with html divs). Now the hard part I've been fighting with for over a week now: I want to use gsap and scrolltrigger to animate stuff and I can't get this custom scroll to work with scrolltrigger - if I don't specify the scroller proxy it gets all choppy and framrate drops low and when I put scroller proxy the whole structure doesn't work. I've been trying putting different values/names in scroller proxy as part of trial & error, but nothing seems to work Before I wasn't using threejs I was using locomotive scroll and I figured out how to pair it with scrolltrigger pretty easily. But in this instance, I am kind of forced to use this custom scroll code. I attach codepen (image not related ) with one note - somehow the scroll doesn't work in the codepen, but it works on my localhost. Hope I explained everyhthing well enough.
  3. hi first of all sorry for my english im trying to replicate navigation menu of http://www.alsafarproject.org/en/map ,its kinda cool it has some skew on scrolling and its smooth and its multi stage, for example when you click on countries in menu submenu will comeup with a nice animation. so i try to make it with gsap becuase why not😃 so here is my long list of question: 1- why my last <li> element is not showing? 2-when i use a low divider in (self.getVelocity/-2000), like -300 when you switch scroll direction fast you will get some choppy skew animation,is there any way to smooth it out like the refreence site? 3- how to achive the submenu transition effect using gsap and vanilla js(by the way i think they use some overflow : hidden trick , but i havent any success for now)? thank you so much for your greate framework.
  4. <template lang="pug"> .container(ref='container') .container__wrap .hoge .hoge__item(style='background:red') .hoge__item(style='background:green') .hoge__item(style='background:blue') </template> <script> import Scrollbar from 'smooth-scrollbar' import gsap from "gsap" // eslint-disable-line import { ScrollTrigger } from "gsap/dist/ScrollTrigger.min.js" // eslint-disable-line class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {// eslint-disable-line 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, // x: Math.sign(x || y) * Math.sqrt(x*x + y*y), } } } export default { mounted() { gsap.registerPlugin(ScrollTrigger) this.scrollbarOnTrigger() this.animation() }, methods: { scrollbarOnTrigger() { const el = document.body // const el = this.$refs.container // const el = this.$('.container') Scrollbar.use(HorizontalScrollPlugin) const bodyScrollBar = Scrollbar.init(el, { damping: 0.1, alwaysShowTracks: true, continuousScrolling: false, delegateTo: document, syncCallbacks: true, }) ScrollTrigger.scrollerProxy(el, { scrollLeft(value) { if (arguments.length) { bodyScrollBar.scrollLeft = value } return bodyScrollBar.scrollLeft }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, } }, }) bodyScrollBar.addListener(ScrollTrigger.update) }, animation() { gsap.utils.toArray('.hoge__item').forEach((el, i) => { gsap.to(el, { opacity: 0.5, scrollTrigger: { trigger: el, scrub: true, horizontal: true, }, }) }) }, }, } </script> <style lang="sass" scoped> .container &__wrap display: flex .hoge display: flex &__item height: 100vh width: 100vw </style> Say hello 👋 I'm currently using Nuxt, smooth-scrollbar.js and gsap's scrollTrigger to create a product. The above code is an example of scrolling horizontally when scrolling vertically and the animation moves with ScrollTrigger. However, the above code has a problem: when the value of the variable "el" in the scrollbarOnTrigger function is set to something like this.$refs.container, the scrollTrigger animation doesn't work for some reason. If anyone has the brains to solve this, please answer me. I don't understand English, so I'm relying on DeepL. If there are words I don't understand, please let me know.
  5. Hello again, I've been using GSAP3' ScrollTrigger plugin for a little while now and managed to make the skew on scroll effect work, which I really enjoyed using. Although it does work perfectly with normal scrolling, I can't seem to make it work while using the SmoothScrollbar.js plugin (https://idiotwu.github.io/smooth-scrollbar/). Please note to the Pen provided: when the SmoothScrollbar is removed, the skew on scroll effect works. I know GSAP and SmoothScrollbar are separate plugins so I'd understand if it just wouldn't work but I hope someone can find a solution. Sincerely, Julius
  6. When you use smooth-scrollbar, React and GSAP ScrollTrigger in multiple React components all animations stop working. Firstly I thought it's Gatsby issue but the same thing happens for pure React. Everything works well if you don't use smooth-scrollbar, also everything works well when you use smooth-scrollbar and store all scrollTrigger animations in one useEffect. But when you move them to other components then all animations stop working. Try to use my codepen example. Animations don't work but when you comment out scrollTrigger object from the "Other" component then it starts to work.
  7. Hello BEST Team ever, first of All, Thank you very much for this amazing work on GSAP 3 . I have weird issue when I tried to implement smoothscrolling with scrolltrigger. I'm getting this error in the console and the scrolltrigger is failing to trigger any animation with scrolling I'm using this code to connect scrolltrigger with smooth-scrollbars import Scrollbar from 'smooth-scrollbar'; import {gsap} from 'gsap'; import {ScrollTrigger} from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); export default () => { const scrollContainer = document.querySelector('[smooth-scroll-container]'); const bodyScrollBar = Scrollbar.init(scrollContainer, {damping: 0.075, delegateTo: window}); bodyScrollBar.track.xAxis.element.remove(); bodyScrollBar.setPosition(0, 0); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; }, }); bodyScrollBar.addListener(ScrollTrigger.update); } By the way smooth-scrollbar is working very well sorry for the lack of proper info as I don't know how to address this problem properly. Thanks in advance
  8. Hi everyone, I'm trying to implement some simple scrollTriggered timelines to a project that's using Barba.js for page transitions and locomotive scroll (with [data-scroll-container] as the ScrollTrigger Proxy). I've managed to get it working on first page load however after transitioning to another page the same timelines appear very janky. If you check teh codepen demo you'll see that images scale smoothly on the index but not the about page. I've tried killing all ScrollTrigger instances with Barbas beforeEnter hook but I think I must be doing something wrong when re-initializing locomotive scroll. If anybody has any experience in using these libraries together and has any advice that would be great! Many thanks https://codepen.io/mulegoat/project/editor/XvJVNP
  9. hello everyone! i wanted to show you a little excercise i made applying what i've learn with @Carl on his fantastic ScrollTrigger course. i am having a problem.. everything works fine until i click a button which fires a function that uses the ScrollTo plugin. i did add that button with the intention of giving the user the option to skip the animation (happening as they scroll) and jump to the following scene... its best if you see for yourselves what i mean. since is a VUE project i have all the logic separated on mixins. here is the link to the codeSandbox i made. https://codesandbox.io/s/help-me-world-44mr3 thanks again for reading me.
×