Jump to content
GreenSock

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

Search the Community

Showing results for tags 'scrolltrigger'.

  • 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

  1. Hey there, i want to add an function to my ScrollTrigger, but it's not working . i want to play this function on enter and pause it on leave Why it's not working , and how to fix it?
  2. I am working on a website that requires a grid of blog posts to be pinned whilst animating in. Once they have animated in the pin ends and another section needs to follow immediately, unfortunately there is a large amount of white space between these two sections. I have turned off pinSpacing but this has had no effect. I'm not sure what else to try at this point.
  3. I am using firebase to store the data of my website. When I am using scrollTrigger function of gsap, my website is not working. What strategy should I use to show the animation on trigger? After loading all data, if I resize my window then the scrollTrigger works. But then it is useless.
  4. Hi guys, I've seen this beautiful site https://browserhistory.squarespace.com/ and I've tried to replicate animation for a test. I started project with PIXI.js and the integration with GSAP sound good. But, how could be possible to manage the scroll and have effect in canvas? Anyone have ideas? I've supposed ScrollTrigger could be the way for snap and repeat but I'm not sure about the right trigger to use 😅 Thanks to anyone
  5. How do I create a similar snapping effect like Fullpage.js? Is it possible with the snapping property in ScrollTrigger? From what I've tried, it seems snapping is always initiated when the element has passed halfway the viewport. I would like a far quicker response, when only a few pixels have been scrolled. This is the snapping-effect I would like to create with ScrollTrigger: https://alvarotrigo.com/fullPage/extensions/parallax.html I've added a codepen to show what I've tried so far.
  6. Hi, I’m new here and I’m trying to have a fixed header fade out upon scrolling down, with a button to have it fade in and out manually (if scrolled down). I’ve got the fade-on-scroll part working but I’m struggling with the fade toggle. I thought I would create some tweens and two independent timelines to which I add the tweens (with different timing in each timeline), and then I associate one timeline with ScrollTrigger and the other one will be executed on click of the button but somehow this doesn’t work. Note, I’m using this in combination with jQuery This is the code I have so far: var anim_header = gsap.timeline({ scrollTrigger: { trigger: $('body'), scrub: true, //markers: true, start:'top top', end: '+='+$('body > header').outerHeight()*1.75+'px' } }), toggle_header = gsap.timeline().pause(), fadeHeader = gsap.to($('body > header'), { opacity: 0 }); anim_header.add(fadeHeader); toggle_header.add(fadeHeader); toggleButton.click(function() { if(!$('html').hasClass('header_active')) { toggle_header.reverse().then(function() { $('html').addClass('header_active'); }); } else { toggle_header.play(); $('html').removeClass('nav_active'); } }); I thought I could just add the same tween to different timelines and they would work independently but apparently this isn’t working; it seems like one timeline overrides the other one.
  7. Hello everyone. I have a trouble with scrollTrigger, I want to pin #intro > .circle to top, I don't know why I pinned it but it jumps to right as you see in my codepen. I tried trigger: "#intro .container" or trigger: "#intro .circle" but they have the same errors. Please help me with scrollTrigger. Thanks in advanced.
  8. Hi, I have a container div set to 100vw x 100vh, position fixed with overflow scroll, however the trigger stops moving after setting "#path-container" to overflow:scroll. Why does this happen and what should I do to fix this? (I need the container div to be 100vh because I want to "squeeze" only what's visible) Thanks in advance, much appreciated!
  9. I'm building a site with horizontal scrolling for the whole site, but have been having a heck of a time doing the whole timeline pretty manually. I'd LIKE to have just a single foreach() which looks for all the <section>s on the page, and animates them one by one, like I have in this codepen: https://codepen.io/DouglasGlover/pen/gOrwbGV Problem is, as you can see, I'm currently adding them to the timeline one at a time, and using some basic math to say "this section is 60% viewport width, so start the NEXT animation at "-=" + 1.4 (duration of previous "out" animation, + (100 - {%width of previous section}). Issue being that the site is CMS driven and may... Completely lack the "previous" section that I intended (maybe the content manager doesn't put any content into a section, so we don't want to show it) Be over 100% viewport width I've had a quick go of it but as you'll see looking at my next codepen, I'm running on fumes here. Here's that attempt: https://codepen.io/DouglasGlover/pen/eYZBZvM So basically I'd like the first codepen I referenced above, but IDEALLY it'd work with a single foreach, and the sections should be able to be ANY width, or NOT EXIST at all, without breaking the whole timeline. Any help at all would be appreciated; I'm sure this is possible but I've been working basically nonstop on this site and it's running me ragged, so if anyone at all could provide a nudge in the right direction even that'd be amazing.
  10. It is not working properly. Let me explain here is code https://github.com/mishangoti/scroll-component here is video explanation of the issue https://www.awesomescreenshot.com/video/2250268?key=4b667fca8dbad42e89d408e58a1b2034 1) what ever page route I refresh, animation on that page work very good, but when I navigate to other route from that route it does not work properly, However if I refresh that route it works good but in other route it does not work as desired. I have given video link for more detail explanation. Please help me solve this issue, I can't solve it by my self. 2) when i switch route for few times all pages animation start working, but it did not work when i refresh and switch route at first time it did not work, then i switch routes few time than animation start working. Contact: https://api.whatsapp.com/send?phone=919429011743&text=HI&source=&data=&app_absent= Please contact me if you know the solution.
  11. It appears as though the scrollerProxy is initiated multiple times after routing which causes the matrix 3d animation to jump from -232213 to 0 and back. I think this is because the nuxt instance is kept while routing between pages that also use the _.vue page template but I cant figure out how to force it to forget the past scrollerProxy 😢 Any advice as to how to initiate smoothscrolling in Nuxt? // _.vue template <template> <div> </div> </template> <script> import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) export default { mounted() { this.smooth() this.$forceUpdate() }, destroyed() { // used to kill the ScrollTrigger instance for this component this.expand = false }, methods: { smooth() { if (process.client) { window.scrollTo(0,0) const locoScroll = new this.LocomotiveScroll({ el: document.querySelector('.smooth-scroll'), smooth: true }) // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on('scroll', ScrollTrigger.update) ScrollTrigger.scrollerProxy('.smooth-scroll', { 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('.smooth-scroll').style.transform ? 'transform' : 'fixed' }) // 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() const headerItems = ['.header__logo', '.nav', '.header__trigger'] if (!this.isTouchDevice()) { headerItems.forEach((item) => { gsap.to(item, { scrollTrigger: { trigger: '.header', scroller: '.smooth-scroll', scrub: true, pin: true, start: 'top', end: document.querySelector('body').offsetHeight, pinSpacing: false, }, y: document.querySelector('body').offsetHeight, transformOrigin: 'center top', ease: 'none' }) }) const largeMedia = document.querySelectorAll('.large-media.no-controls') if (largeMedia) { largeMedia.forEach((media) => { let mediaItem = media.querySelector('video') if (media.querySelector('img')) { mediaItem = media.querySelector('img') } gsap.to(mediaItem, { scrollTrigger: { trigger: media, scroller: '.smooth-scroll', scrub: true, start: 'top', end: 'bottom', }, y: '100%', transformOrigin: 'center top', ease: 'none' }) }) } const nextCase = document.querySelector('.next-case') if (nextCase) { gsap.to('.next-case .large-media', { scale: 1, opacity: 0, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) gsap.to('.next-case__background', { opacity: 1, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) gsap.to('.large-text-header', { opacity: 1, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) const observerTrigger = document.querySelector('.next-case__observer-trigger') const onIntersection = (entries) => { for (const entry of entries) { if (entry.isIntersecting) { this.loaded = entry.intersectionRatio if (entry.intersectionRatio > 0.95) { this.background = true if (!this.expand) { // window.location.href = nextCase.querySelector('a').getAttribute('href') // goor, doch effectief this.$router.push(nextCase.querySelector('a').getAttribute('href')) this.expand = true } } } } } let threshold = [] // create array with numbers between 0 and 1 for (var i = 0; i <= 100; i++) { threshold.push(i / 100) } const observer = new IntersectionObserver(onIntersection, { threshold }) observer.observe(observerTrigger) } } } }, isTouchDevice() { try { document.createEvent('TouchEvent') return true } catch (e) { return false } } }, } </script>
  12. Hey, I'm a very newbie, I want to pin a section (section 1) with 100vh length and pinSpacing: true to play an animation with scrub, after the animation done, I want to pin section 1 again with no pinSpacing to get the next section overlaps scrolling in. could you guys show me how to get that result? I've tried some ideas but still haven't got the effect I want. Thank you very much!
  13. Ola! I'm working on some basic fade-in effect with scrollTrigger and I'm encountering an issue with the last component not being displayed when reaching the end of the page. As you can see from the markers, this is not an issue with the plugin, the start position of the last section is never reaching the scroll-start. To avoid this issue I've added a listener on the scroll and when reaching the end of the page, I'm forcing all the tweens to be played. Would there be a better alternative to this? I was looking for a method from ScrollTrigger to activate it manually (e.g. tween.scrollTrigger.force()) because now the tween is being played (in my Codepen) but scrollTrigger is not cleared out. Happy holidays 🎄 Mamboleoo
  14. Hi people, Anybody have problem with Nuxt, Vuetify and ScrollTrigger - wrong start position for trigger? Start is set to "top top" but with markers: true I see that start is above trigger div element with a value that depends on width of page. As trigger div element is positioned lower on page, gap is getting bigger. Same code works fine in Vue. Even most simple ScrollTriger example behaves same in Nuxt - start is above trigger element (if trigger div is in the middle of page, not top). I think that this probelm have something to do with Nuxt server side rendering, but not sure. I tried to wrap everything in if (process.client) { ... } but no success. Anybody have similar problems or idea? Thanks, gmilic
  15. Hey, https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97?editors=1010 Based on the case below, I tried to build a custom scroll bar for a scrollable element with fixed sizes. It works ... But if you change the window size, if the scroll progress is not equal to 0 or 1, then the drag function is disturbed. https://codepen.io/mikeK/pen/c889651f79b9848c71f4a918e94471a8?editors=0010 What am I doing wrong? Mikel
  16. I have an issue with a pinned div containing svg that shifts on the start of the scroll. I recreated the demo version, but it is more visible in the original version. I have read the docs and all other posts on the topic I could find and tried pinType: "fixed" But it didnt solve the issue for me. Thank you in advance! Screen Recording 2020-12-22 at 19.04.57.mov
  17. Hi guys ! I'm looping on an array of elements to toggle a class on these elements each time they enter the viewport but I don't think my code is optimized. Is there anything I could do to simplify this : const buttons = gsap.utils.toArray('.btn'); buttons.forEach((btn) => { gsap.from(btn, { scrollTrigger: { start: 'top bottom', end: 'bottom top', trigger: btn, onEnter() { btn.classList.remove('disable'); }, onLeave() { btn.classList.add('disable'); }, onEnterBack() { btn.classList.remove('disable'); }, onLeaveBack() { btn.classList.add('disable'); } } }); }); Thanks for your help
  18. Hey guys, Started playing a bit with ScrollTrigger and loving it, great job! Is it possible to pin elements taller than the viewport and make them scrollable though? Like this: https://abouolia.github.io/sticky-sidebar/ check out the "Scrollable Sticky Element" example, try scrolling up and down to see what I mean. Fingers crossed
  19. Hi! When I remove the markers property or set it to false, the ScrollTrigger stops working. Why? PS: With markers it works let tl2 = gsap.timeline(); tl2.from(".root--offer__header", { xPercent: 650, }); ScrollTrigger.create({ animation: tl2, trigger: ".root--offer__header", start: "top top", end: "+=4000", scrub: true, pin: true, anticipatePin: 1, duration: 2, ease: "none", markers: true, });
  20. As you see in codepen link the animation work but not well, when you make a scroll the red element move as normal, also the blue element works normally, but if you continue scrolling, you will arrive at to step, you can't look at the animation. I want to move it as a position fixed moving my scroll.
  21. hello guys, i'm facing a problem with my code, trying to use the scrollTrigger function to scroll through brands in section three, but the scroll is flipping the fullpage sections, even though i disabled autoscroll and tried normalScrollElements but with no success please any help ?
  22. Newbie here, I'm using Vue (3.0) and I'm trying to get started with GSAP and Locomotive Scroll but ran into a couple of issues. I've tried using some sample code(bottom of post - mine is without the code to scroll images) to get smooth scrolling implemented but I've found that it adversely affects the layout of my page. A page is a div element, styled by: .full-page { min-width: 100%; width: 100%; min-height: 100vh; } So the structure of the application is: <html> <body> <div id="#app"> <div class="full-page"> ... </div> </div> </body> </html> Here is my App single file component where the scrolling code is: <template> <router-view></router-view> </template> <script> import {gsap} from 'gsap'; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import LocomotiveScroll from 'locomotive-scroll'; export default { name: 'App', computed: { tag() { return this.scroller.tagName; }, scroller() { return document.scrollingElement; } }, mounted() { this.scroller.setAttribute("data-scroll-speed", "0.5") this.scroller.setAttribute("data-scroll", "") const locoScroll = new LocomotiveScroll({ el: this.scroller, smooth: true }); gsap.registerPlugin(ScrollTrigger); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(this.tag, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight } }, pinType: this.scroller.style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); } } </script> <style scoped> </style> Note that the scrolling element is the html tag (document.documentElement). The scrolling speed hasn't changed. I'm also using a custom cursor which has size 64px by 64px and when I move it to the edges it makes the scrollbars appear (I can confirm this is because of GSAP + Locomotive scroll as everything is fine without it). The second issue that I cannot move the cursor past 100vh (you know, to scroll to the rest of the page) - I can scroll the page, just the cursor doesn't come with. Also, position: fixed elements also do not pass the 100vh point (again, works fine without GSAP) and hence they are lost when I scroll down. There's something I'm clearly missing about correctly structuring pages. I would like to keep the HTML element as my scrolling element due to the current structure of the app - is it a requirement that the scroll container cannot be the HTML/body elements? After wrapping the html in the codepen link in html and body tags and then adding the required attributes to the html tag manually, the scrolling still works as expected so I'm not sure what's going wrong. Any and all help is greatly appreciated.
  23. What`s up, GSAP! I`ve briefly looked through docs to find any mention of the same issue, but seems like i need to ask it here. It looks like pin-spacer (wrapper of pinning element) doesn`t copy exact same CSS styles from pinning element. First of all I`m interested in z-index, as I`m developing complex sections` behaviour with revealing, pinning, swapping and covering sections. And missing of z-index in pin-spacer breaks some of my hacks. Currently, I`m using 3.6.0 you guys gave me a month ago to solve other issues. But it looks like previous versions doesn`t clone z-index as well. I think I could develop a workaround for my specific problem, but I wonder: Why z-index and some other styles are not translating to pin-spacer? While writing this, I`ve solved my issue by setting position: relative (position wasn`t set before) for all my pinning elements. While z-index is still not translated to pin-spacer, it`s layering looks OK. MB It`s some of html/css essentials but nested (in pin-spacer) element`s z-index somehow counts different dependent at various css position values. OFC, If you request I would add some codepen to better illustrate what is written, but it`s no more an issue.
  24. Hello, I'm using Gsap Scroll Trigger with my all my entire pages. I have multiples sections. Every section has different child element. I want to know if it's possible to handle specific part of sections (for example, 15% of a specific one, the same as I do with normal vertical scroll ). But I don't know how to do it and I don't know if it's possible. Praticale example: In the codepen i want something like this this: Apply different animations on different child element of the same parent (.red) relatively to the actual parent that is in the viewport. Thanks for your help gsap.from('#text-1', { opacity: 1, x: -300, scrollTrigger: { trigger: '.red', start: '80% 50%', end: '+=500', scrub: 1, }, }); gsap.from('#text-2', { opacity: 1, y: 300, rotate: -90, scrollTrigger: { trigger: '.red', start: '60% 50%', end: '+=500', scrub: 1, }, });
  25. Hi, I'm trying to animate cards on horizontal scroll inside a dom element (not the viewport): I have a single timeline and a scrolltrigger with a dom element (container) as scroller. The animation of the cards works with the scrubbing perfectly, but when I resize the screen, the start position for the animation seems to shift and offsets the whole thing. I tried setting a function for the start value, and tried with the infos on the following thread, but I can't seem to resolve the issue. Any help greatly appreciated! Cheers.
×