Search the Community
Showing results for 'scroll-behavior: smooth'.
-
On iOS 16 Safari with Nuxt V3 and GSAP ScrollTrigger and scroll-behavior: smooth; in my stylesheet, the page automatically scrolls back to top when scroll animation has ended. I'm absolutely not sure if this is related to GSAP Scroll Trigger or if this is an iOS 16.0 bug 🤐 I already tried latest Beta v.3.11.2, which has the same effect. Screencast On the left side you'll see an older iOS 14.x release, on the right side the latest iOS 16.0. https://user-images.githubusercontent.com/1102712/191813194-b7d8b2d5-08e8-4c42-bfc8-18bd5440872f.mov Workaround Remove scroll-behavior: smooth; or remove scrollTrigger or use an older iOS version Reproduction (Nuxt v3) https://stackblitz.com/edit/github-gwd8gb?file=app.vue
-
Hi, Sorry about the issues but yeah, without a demo that clearly illustrates the problem there is not a lot we can do 🤷♂️ The only thing I can think of is that somehow the markers are pushing the height of the document element so everything works as expected. You should review your setup in order to see if something in your HTML/CSS could be causing something that the markers are actually fixing, which would be quite weird TBH. Another option is that something else (like another JS package or CSS library) is interfering with this and causing the problem. Try removing some of them one by one and see if that fixes anything. As I was about to submit this I checked your site again and opened devtools and I noticed that you're using wordpress and that your body element has scroll-behavior: smooth, that could be a source of problems (linke 92): https://staging-chfp.shereewalker.com/wp-content/themes/CHFP/style.css?ver=1.0 Try overriding that in a custom CSS that is loaded after the theme's styles in order to see if it helps. Hopefully this helps. Happy Tweening!
-
Hi @Ponnyprisma and welcome to the GSAP Forums! Sorry to hear about the problems but if you can't reproduce it on a codepen demo there is not a lot we can do about it. On top of that the demo you posted shows that this is not a GSAP related problem, but something else in your app is clearly interfering with how things are being done. There are known issues (not a lot) when using some features by Bootstrap 5, manly because it adds scroll-behavior: smooth to your body element, so if you're using Bootstrap 5 you can overwrite that in your own CSS. Sorry I can't be of more assistance. Happy Tweening!
-
Hi @WEB1995 and welcome to the GSAP Forums! Thanks for being a GSAP Club member and supporting GSAP! I tested the live URL you posted but I don't see ScrollSmoother being used in it. I do see that you have scroll-behavior: smooth; in your <html> tag. That can create a few issues with ScrollTrigger as Jack mentions in this post: Using React in an app is not really the way to make things work, maybe wait for the images/videos to be completely loaded before creating the ScrollSmoother instance and the ScrollTrigger instances. Finally you can create a minimal demo in Codepen using the bonus plugins, that clearly illustrates the issue you're having, just do your best to keep your demo as small as possible. You can fork this codepen: https://codepen.io/GreenSock/pen/aYYOdN Hopefully this helps. Happy Tweening! -
Hi @IvanKunne welcome to the forum and thanks for being a club member. elementor is probably adding a bunch of CSS containing transition: all 0.3ms ease-in; which is fighting with GSAP. You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. (Also check if something is setting scroll-behavior: smooth; to your html and force it to be scroll-behavior: auto;) I've never used elementor so I can't tell you where you can edit its settings to not load scrolling CSS or transition CSS, but you'll see that when you make a minimal demo with your current setup without all the CSS being loaded by Wordpress plugins ScrollSmoother and ScrollTrigger will just work. Hoop dat het helpt en veel gelukt met je project!
-
It's a protection against scroll-behavior: smooth which messes things up. Some CSS libraries apply that, so we're overwriting it. In order for ScrollTrigger to do its magic, it must temporarily set the scroll position of the page back to the top (0), do all of its calculations and pre-optimize, and then restore the scroll position (it's invisible to the user), but if you apply scroll-behavior: smooth, that basically prevents that from working. It's sorta like setting a CSS transition to a value that GSAP animates - the CSS transition intercepts the value application and says "NOPE! I won't allow that right now...I'll drag it out over the course of a certain duration". In short, it's protecting you 😉
-
mobile Scrolling and animation problem on Android devices
mvaneijgen replied to VoinG's topic in GSAP
It is probably scroll-behavior: smooth; which gets added by Bootstrap to the html, if that is not the issue a minimal demo would be needed, to help you debug. -
/* global gsap */ import React, { useEffect } from 'react'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import Navbar from './Navbar'; import backgroundImage from '../Assets/bmw.jpg'; const Herosection = () => { useEffect(() => { gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline({ scrollTrigger: { trigger: "#main", markers: true, start: "50% 50%", end: "100% 50%", scrub: 2, // pin: true } }); tl.to("#center", { height: "100vh" }, 'a') .to("#top", { top: "-50%" }, 'a') .to("#bottom", { bottom: "-50%" }, 'a') .to("#top-h", { top: "60%" }, 'a') .to("#bottom-h", { bottom: "-30%" }, 'a') .to(".content", { delay: -0.2, marginTop: "0%" }); }, []); return ( <div> <Navbar /> <div id="main-p"></div> <div id="main"> <div id='top'> <h id="top-h">Gallery</h> </div> <div id="center" style={{ backgroundImage: `url(${backgroundImage})` }}> <div className="content"> <h4>GRAVITY</h4> <h3>Browse the work that define a movement and created a craft.</h3> <div className="btn"> <h5>ENTER GALLERY</h5> </div> <h2>(17)</h2> </div> </div> <div id='bottom'> <h id="bottom-h">Gallery</h> </div> </div> </div> ); }; export default Herosection; //css *{ margin: 0; padding: 0; box-sizing: border-box; color: #0f0f0f; } @font-face { font-family: Founder; src: url(./Assets/FoundersGroteskCondensed-Bold.woff2); } @font-face { font-family: CardinalR; src: url(./Assets/cardinalfruitweb-regular.woff2); } @font-face { font-family: Cardinali; src: url(./Assets/cardinalfruitweb-italic.woff2); } @font-face { font-family: Font1; src: url(./Assets/kesslersuperdisplayweb-regular.ttf); } @font-face { font-family: Font2; src: url(./Assets/FraktionMono-Regular.ttf); } html, body { font-family: "Roslindale Display Condensed"; scroll-behavior: smooth; scroll-snap-type: y proximity; } .nav { position: fixed; width: 100%; display: flex; justify-content: space-between; z-index: 1000; } .nav-links { display: flex; } .logo, .nav-item { margin: 2em; font-weight: 400; font-size: 1.5vw; } h1 { width: 80%; position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; font-weight: 500; font-size: 20vw !important; line-height: 1; text-transform: uppercase; } a { text-decoration: none; font-weight: 500; } .slide-in { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #0f0f0f; transform-origin: bottom; z-index: 15; } .slide-out { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #0f0f0f; transform-origin: top; z-index: 15; } #main-p{ width:100%; height:100vh; background-color: #ffffff; } #main{ position: relative; width: 100%; height: 100vh; background-color: aquamarine; overflow: hidden; z-index: 0; } #top{ position: absolute; top: 0; width: 100%; height: 50vh; background-color: #fff; z-index: 1; overflow: hidden; } #center{ position: relative; width: 100%; height: 100vh; transform-origin: center; background-color: rgba(0, 0, 0, 0.5); transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; overflow: hidden; } #bottom{ position: absolute; bottom: 0; width: 100%; height: 50vh; background-color: #fff; overflow: hidden; } #main h{ font-family: Founder; font-size: 22vw; position: absolute ; top: 46.5%; left: 50%; transform: translate(-50%,-50%); } #top-h{ bottom: 50% ; } #bottom-h{ top:0% !important; } .content{ margin-top: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100vh; color: #ffffff; gap: 4vh; } .content h4{ font-size: 1vw; font-family: Founder; color: #fff; } .content h3{ width: 22%; font-size: 3vw; font-family: CardinalR; text-align: center; font-weight: 400; color: #fff; } .content .btn{ display: flex; align-items: center; justify-content: center; width: 7vw; height: 2vw; border-radius: 50px; background-color: #fff; color: #0d0d0d; font-family: Founder; } .content h2{ font-size: 20vw; font-family: Founder; color: #fff; } /* HeroSection2 */ #main1{ position: relative; display: flex; align-items: center; width: 100%; height: 100vh; z-index: 0; /* overflow: hidden; */ margin-top: 100px; } .left1{ display: flex; align-items: center; justify-content: center; width: 30%; height: 100%; } .center1{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40%; height: 120%; } .right1{ display: flex; align-items: center; justify-content: center; width: 30%; height: 100%; } .btn1{ display: flex; align-items: center; justify-content: center; align-items: center; padding: 0.5vw 1.2vw; border: 1px solid #333; border-radius: 50px; font-size: 0.5vw; font-family: Font2; transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; } .t-center{ display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 50%; transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .b-center{ width: 100%; height: 50%; transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .center1 hk{ line-height: 15vh; font-size: 10vw; font-weight: 400; font-family: Font1; text-align: center; } .c-center-one{ position: relative; transform-origin: center; width: 100%; height: 0vh; transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; } .c-center-two{ width: 100%; height: 0vh; transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; } .img-all{ position: absolute; opacity: 0; pointer-events: none; transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; background-size: cover; background-position: center; z-index: 200; } .img-one{ bottom: 60%; right: 50%; width: 25vw; height: 25vh; filter: blur(10px); transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .img-two{ top: 55%; left: 50%; width: 15vw; height: 17vh; filter: blur(5px); transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .img-three{ top: 50%; left: 37%; width: 10vw; height: 12vh; background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80); filter: blur(20px); transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .img-four{ top: 40%; left: 55%; width: 7vw; height: 7vh; background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80); filter: blur(20px); } #one{ background-image: url(https://images.unsplash.com/photo-1682687218608-5e2522b04673?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2575&q=80); } #two{ background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80); } #three{ background-image: url(https://images.unsplash.com/photo-1683573254548-ebb7b94d7def?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1353&q=80); } #four{ background-image: url(https://images.unsplash.com/photo-1683053243792-28e9d984c25a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1160&q=80); } #five{ background-image: url(https://images.unsplash.com/photo-1682709846996-f3c895743d37?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80); } #six{ background-image: url(https://images.unsplash.com/photo-1682794496831-81a52c8e9136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80); } #seven{ background-image: url(https://images.unsplash.com/photo-1682314803906-d2078f031d82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80); } #eight{ background-image: url(https://images.unsplash.com/photo-1682200736161-77f04daf9a59?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1744&q=80); } /* Componets2 */ .links { display:flex; gap:3em; } a{ text-decoration: none; color: #000; } footer { position: fixed; bottom:0; width: 100%; padding: 3em; display: flex; justify-content: space-between; align-items: center; } .hero { width: 100%; position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); text-align: center; z-index: -1; } h1 { width: 100%; color: #c0c0c0; font-size: 15vw; font-weight: 400; letter-spacing: -0.05em; } p { font-size: 1.5vw; color: #000; opacity: 0.35; } .btn { position: relative; top:75%; left:50%; transform: translate(-50%, -50%); background: #0084ff; color: #fff; font-size: 12px; border-radius: 30px; padding: 1em 2em; cursor:pointer; z-index: 2; } .img-gallery-container { display: flex; position: relative; width: 100vw; padding-top: 100vh; } .img { position: absolute; margin-bottom: 1em; width: 400px; height: 500px; overflow: hidden; top:50%; left: 50%; transform: translate(-50%, -50%); } .img:nth-child(1), .img:nth-child(3) { left:75%; } .img:nth-child(2), .img:nth-child(4) { left:25%; } .img.reorder { position: absolute; top:47.5%; left:50%; transform: translate(-50%, -50%); width: 250px; height: 325px; } .img.reorder:nth-child(1) { transform: translate(-50%,-50%) rotate(10deg); } .img.reorder:nth-child(2) { transform: translate(-50%,-50%) rotate(-5deg); } .img.reorder:nth-child(3) { transform: translate(-50%,-50%) rotate(2deg); } .img.reorder:nth-child(4) { transform: translate(-50%,-50%) rotate(-2deg); } package.json { "name": "react-website", "version": "0.1.0", "private": true, "dependencies": { "@gsap/react": "^2.1.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "framer-motion": "^11.0.6", "gsap": "^3.12.5", "locomotive-scroll": "^4.1.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-locomotive-scroll": "^0.2.2", "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", "sass": "^1.71.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } can anyone solve why pin true is not working in my code
-
I was able to determine that my scroll trigger container size is being recalculated when the bottom address bar appears on iPhone. Here's the full component. <?php $eyebrow_heading = $section['eyebrow_heading'] ?? null; $blurb = $section['blurb'] ?? null; $items = $section['items'] ?? null; $section_wrapper_classes = []; $section_inner_wrapper_classes = [ 'tw-bg-rd-dark-green', 'tw-text-white', 'tw-rd-container-padding', 'tw-h-[102vh]', 'tw-py-20', 'sm:tw-py-0', ]; ?> <div id="scroll-trigger-component" x-data="rendevorDifference" x-intersect.margin.400px.once="refreshScrollTrigger()" x-intersect:leave="console.log('left')" class="<?php echo implode(' ', $section_wrapper_classes); ?>" > <div class="<?php echo implode(' ', $section_inner_wrapper_classes); ?>"> <div class="tw-container tw-flex tw-flex-col tw-justify-center tw-h-full"> <?php if ($eyebrow_heading) : ?> <h2 class="tw-font-medium tw-tracking-widest tw-text-fluid-step-0 tw-mb-8 sm:tw-mb-14 tw-mt-4 sm:tw-mt-0"> <?php echo $eyebrow_heading; ?> </h2> <?php endif; ?> <div class="tw-block tw-flex tw-flex-col sm:tw-flex-row sm:tw-items-center sm:tw-h-[460px]"> <div data-blurb class="sm:tw-flex-[0_0_50%] tw-mb-10 sm:tw-mb-0" > <?php if ($blurb) : ?> <h3 class="tw-text-fluid-step-6 tw-leading-[1.3]"> <?php echo $blurb; ?> </h3> <?php endif; ?> </div> <?php $reveal_pane_classes = [ 'tw-relative', 'sm:tw-flex-[0_0_50%]', 'sm:tw-pl-[min(152px,_8vw)]', 'lg:tw-pl-[min(152px,_12vw)]', 'sm:tw-border-l', 'sm:tw-flex', 'tw-flex-col', 'tw-justify-center', 'tw-overflow-hidden', 'tw-h-[32vh]', 'sm:tw-h-full', 'tw-mt-10', 'sm:tw-mt-0', ]; ?> <div class="rd-difference-divider tw-block tw-h-[1px] tw-bg-white sm:tw-hidden"></div> <div data-reveal-pane class="<?php echo implode(' ', $reveal_pane_classes); ?>" > <?php foreach ($items as $index => $item) : ?> <style> [data-active-index="<?php echo $index; ?>"] .highlight-<?php echo $index+1; ?> { transition: background-color 0.5s, color 0.5s; background-color: <?php echo $item['accent_color']; ?>; color: var(--color-rd-dark-green-500); } </style> <div class="rd-reveal-item"> <?php if ($item['title'] ?? null) : ?> <h4 class="tw-font-medium tw-tracking-widest tw-text-fluid-step-0 tw-mb-4 tw-uppercase" style="color: <?php echo $item['accent_color']; ?>;" > <?php echo $item['title']; ?> </h4> <?php endif; ?> <?php if ($item['body_text'] ?? null) : ?> <div class="tw-text-fluid-step--1 sm:tw-text-fluid-step-0 sm:tw-max-w-[280px] tw-font-display"> <?php echo $item['body_text']; ?> </div> <?php endif; ?> </div> <?php endforeach; ?> </div> </div> </div> </div> </div> <?php if ($section_is_first_instance) : ?> <style> :root { scroll-behavior: smooth; } .rd-reveal-item { opacity: 0; transition: opacity 0.5s; position: absolute; } .rd-reveal-item.is-active { opacity: 1; } </style> <script> document.addEventListener('alpine:init', () => { Alpine.data('rendevorDifference', function() { return { componentEl: this.$el, scrollTrigger: null, init() { this.initScrollTrigger(); // document.addEventListener('scroll', _.throttle(this.refreshScrollTrigger.bind(this), 500)) }, refreshScrollTrigger() { console.log('refreshing scroll trigger') this.scrollTrigger.refresh() }, initScrollTrigger() { const items = gsap.utils.toArray(".rd-reveal-item") const componentEl = this.componentEl let currentIndex = 0 this.scrollTrigger = ScrollTrigger.create({ markers: false, trigger: this.componentEl, start: `top top`, pin: true, normalizeScroll: true, end: function() { return '+=' + window.innerHeight * items.length }, toggleClass: 'is-active', onEnter: function() { items[0].classList.add('is-active') componentEl.dataset.activeIndex = 0 }, onLeaveBack: function() { items[0].classList.remove('is-active') componentEl.removeAttribute('data-active-index') }, onUpdate: function(self) { const previousIndex = currentIndex currentIndex = Math.floor(self.progress * items.length) if (previousIndex >= items.length || currentIndex >= items.length) return if (previousIndex !== currentIndex) { items[previousIndex].classList.remove('is-active') items[currentIndex].classList.add('is-active') componentEl.dataset.activeIndex = currentIndex } }, }) } } }) }) </script> <?php endif; ?>
-
Hi @Rodrigo, I fixed this problem. Fun fact - It doesn't work correctly because I added to the HTML { scroll-behavior: smooth; } How it is possible? I removed this style and everything seems to work right now.
-
Yeah, my best guess is that maybe you've got something interfering with setting the scroll position, like tailwind adding scroll-behavior: smooth(?) As @GSAP Helper said, a minimal demo that illustrates the problem will be essential to getting the problem diagnosed.
-
Indeed, that's very intentional. When ScrollTrigger.refresh() runs, it basically has to tear down any pinning that it did, temporarily return the scroll to the top to do all the measurements, and then restore it (you'll never see that happen - it's transparent to the user). If you've got scroll-behavior: smooth, it totally messes that up because the browser refuses to scroll to that spot immediately. It's sorta like applying a CSS transition to a property that's being animated by GSAP. 60 times per second, GSAP is updating the value, but if there's a CSS transition on it, the browser is like "NOPE, I don't care if you just made that change...I'm gonna drag it out over the course of ___ seconds". What's confusing me, though, is what you're saying the problem in your project is. Can you please provide a minimal demo that clearly illustrates the issue so we can see it ourselves? Are you saying that you cannot scroll back to the top? -
Hi @pardieiro welcome to the forum! The property in a timeline is scrollTrigger not ScrollTrigger (see capital S, happens to me all the time). If things are not working in Wordpress I advise you to disable big chunks of your install to see what might be causing the issue, but if you're using a off the shelve theme it is probably adding something via CSS something like transition: all 1s ease-in; or html { scroll-behavior: smooth; } Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZEPLLPY?editors=0010
-
scrolltrigger Pinned element gets stuck upon reloading in Chrome
mvaneijgen replied to Grene's topic in GSAP
It is probably scroll-behavior: smooth; that Bootstrap adds to something like the body or the html. Try setting scroll-behavior: auto !important; Hope it helps and happy tweening! -
Hi @Federico2811 welcome to the forum! The issue here is your CSS position fixed and probably also bootstrap which adds scroll-behavior: smooth; which you'll need to overwrite with scroll-behavior: auto !important; (they either put it on the body or the html or everything I don't know anymore) Next you're overwriting the default scroll of the browser, you need to be a really skilled web developer and 100% know what you're doing if you want to take that control away from the browser and roll you're own! I've been doing this for over 10 years now and I've never needed to overwrite the scroll in that way. Here is your demo with the overflow and position properties set back to normal and now ScrollTrigger works like a charm. If I was you I would restructure your layout a bit and pin the element that contains all your elements instead of creating position: fixed; elements you can even pin the body like so pin: "body", but better is to create an element, something like #pinMe an use that as the pin. As you've found you can indeed set a different scroller in ScrollTrigger, but there was to much code in your minimal demo to figure out how that would work, my advise first do it the 'normal; way, by having the browser handle the scrolling, before you do your custom scroll and again you really need to know what you're doing if you want to go that route. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ExMjqvV?editors=1010
-
Hi @ninmorfeo you're sharing your .local site (that is only accessible via your local machine), that said we can't really debug a live website anyway, because there is just no way to modify the code. The issue is not happening on Codepen do I understand that correctly? (I don't see anything weird at least). My advise would be start disabling big chunks of your code to see if the issue goes away and then start enabling small chunks again until it breaks, that way you know where the issue lies. If it is a weird scroll bug you could check if some tool your are using adds scroll-behavior: smooth; to your HTML if that is the case you could set html { scroll-behavior: auto !important; } (for example Bootstrap adds this line to your CSS). If you have found the issue and get seem to get a fix you could replicate your setup (please don't include your whole project) with the bug in one of our Stackblitz starter templates. Hope it helps and happy tweening!
-
It's Bootstrap scroll-behaviour: smooth, adding the following to you rCSS fixes the issue: html { scroll-behavior: auto !important; } Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/abXPWdq
-
Seems like the bootstrap version you're adding (5.0.2) is adding something that screws up the logic. https://codepen.io/mvaneijgen/pen/abXGOQL Yep, it is scroll-behavior:smooth that Bootstrap adds to the HTML element If you set it to auto on your CSS it fixes the issue. Hope it helps and happy tweening! Side note, you also want to subtract one section from your snap logic, because it starts already at the first one, so you don't want to count that one. https://codepen.io/mvaneijgen/pen/JjxvYjv?editors=0010
-
I noticed several problems: You should never apply CSS transitions to the same elements that you're animating with GSAP. They interfere. Every time GSAP makes a change (60 times per second), the CSS transition interrupts and says "NOPE! I won't allow that change to happen yet...I'm gonna drag that out over x-seconds..." which is very bad for performance too. You've got CSS issues, like you're using flexbox that centers things vertically but it sounds like you want them aligned top, right? Don't apply scroll-behavior: smooth to a page that uses ScrollTrigger/ScrollSmoother. You didn't load ScrollTrigger or ScrollSmoother You didn't have a wrapper or content div for your ScrollSmoother I'd recommend using GSAP to do your rollover animations too instead of using CSS transitions https://codepen.io/GreenSock/pen/qBgqyoe?editors=0010 Does that help?
-
scrollTo with expanding accordion tabs not working with scrollTrigger
GreenSock replied to mirohristov's topic in GSAP
Ah, there are several problems here... You're using CSS transitions instead of GSAP You've created logic issues with the way things are set up there because when you click on that anchor link, the browser just looks at where that target is NOW (when things are collapsed), but then on your way there, you've got things expanding out which push the entire page taller and the target element further down, so the browser has no idea how to accommodate all that. It just goes to the scroll position that it initially determined that element is sitting at. scroll-behavior: smooth is inherently problematic for scroll-driven calculations because it completely interferes with changing the scroll position. Just like CSS transitions interfere with normal JS-driven animations because when GSAP sets a property, the browser says "NOPE! I won't do that...I'm gonna take some extra time to apply that..." So is this possible to work around? Probably, but it's well beyond the scope of help we can provide for free here in the forums (please see the forum guidelines). We do offer paid consulting services if you need those. Just contact us privately if you'd like to explore that. Also, this won't help in this particular case because you're doing a bunch of custom logic and CSS-driven stuff, but in many cases this helper function can help: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollLookup/ -
scrollTo with expanding accordion tabs not working with scrollTrigger
mirohristov replied to mirohristov's topic in GSAP
Sure thing. Here's a minimal pen. The overall height of the window expands as you scroll, so the anchor tag `#bottom` can't reach when using `scroll-behavior: smooth;`. I'm already using ScrollTrigger.refresh(); https://codepen.io/mirohristov/pen/dywxyby -
After scrolling in iOS, the animation goes to its Startposition from the timeline
mvaneijgen replied to MOQO's topic in GSAP
You probably have a CSS property called scroll-behavior: smooth; set which can cause this issue. Also a timeline can only have one ScrollTrigger and ScrollTriggers can not be set on individual tweens of a timeline. Hope this helps solve your issue, otherwise please provide a minimal demo so that we can take a more in depth look. -
Hm, that link says "Project not found" - I wonder if it's a permissions issue on your end. I noticed in your video something very strange, though - it looks like you're setting up a ScrollTriggered tween of backgroundColor and then INSIDE several callbacks (like onLeave), you're creating an entirely new tween that's fighting for control of the exact same thing on the same element. That's definitely problematic. You're basically having one tween tell backgroundColor to go in one direction, and another tween tell it to go in another direction simultaneously. I looked at your earlier link and noticed a few things: You're using the Smooth-scrollbar 3rd party library which is not a GreenSock product so we can't really support it here. I strongly suspect that's causing problems here. I wonder if you set up the proper scrollerProxy() so that ScrollTrigger gets updated in the correct way by your scroll-jacking library(?) I'd strongly recommend eliminating Smooth-scrollbar from your project temporarily just to see if the issues are resolved if you use native scroll and no scroll-jacking. You set up scroll-behavior: smooth in your CSS. That's problematic because it messes with how the browser reports its scroll position. I don't think this is the reason for your problems, but you're actually creating some of your animations OUTSIDE of the context because you're doing it in the callbacks that likely run after the context function finishes running. But honestly I think it'd be far cleaner to avoid those callbacks that are creating new tweens every time, and instead just create on animation with the ScrollTrigger attached and use the toggleActions to do what you want, like toggleActions: "none play reverse none" Typically, StrictMode is what causes problems/confusion because it fires your useEffect()/useLayoutEffect() TWICE, meaning you may be accidentally creating conflicting/duplicate animations or ScrollTriggers. But doing proper cleanup (like with gsap.context()), that's not a problem. Given the fact that the ScrollTriggers never fire when you don't do StrictMode, that leads me to believe that your 3rd party smooth scrolling library is causing the problems, like it somehow depends on StrictMode to actually fire things properly. ScrollTrigger isn't getting any information about the page itself scrolling (probably because your 3rd party smooth scrolling library has hijacked things and isn't telling ScrollTrigger about the updates). So my recommendation would be to completely remove the smooth scrolling library for now, and get the page scrolling natively. Then see if your ScrolTriggers fire as you'd expect. If not, post back here with a minimal demo showing as much and we can take a peek. ?
-
html { scroll-behavior: smooth; } This one line of css cost me many hours of debugging. ScrollTo pluging was working funky when scroll-behavior set to smooth. Chrome 100.0.4896.127, Windows 10
-
I want to do a animation in which the text goes towards the right and disappears and new text comes. I am making a website. The code is given below. <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cormorant"> <script src='https://kit.fontawesome.com/a076d05399.js'crossorigin='anonymous'></script> <link rel="stylesheet" href="Styles.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/TextPlugin.min.js"></script> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Gsap</title> </head> <body> <ul class="nav"> <li><h1 class="logo"></h1></li> <a class="menu"><i class="fas fa-bars"></i></a> </ul> <h1 class="head"></h1> <p class="para"></p> <div class="container"><div class="container2"><h1 class="head2">We Offer Great Things</h1><p class="para2">At our site, we offer great things to our readers. Whether you're interested in exploring the latest news and trends, delving into deep philosophical questions, or learning about innovative new technologies and ideas, we have something for you.</p></div></div> <script> gsap.registerPlugin(TextPlugin, ScrollTrigger); function loadAnimation() { gsap.set('.menu', {x: '+=200'}) gsap.to('.menu', { duration: 2, x:'-=200', rotation: 360 }) const tl = gsap.timeline(); tl.to('.logo', { duration: 2, text: 'Read & Write' }) tl.to('.head', { duration: 1.5, text: 'Words that Matter'}) const s = 'Explore a diverse range of thought-provoking and insightful articles, on our exclusive articles page. <br>\n' + ' Enhance your understanding of the world around us.'; tl.to('.para', { duration: 5, text: s }) } window.addEventListener("load", loadAnimation) </script> </body> </html> //My CSS Class body { margin: 0; padding: 0; background-image: url("background.jpg"); background-position: center; transition: 1s; background-repeat: no-repeat; background-size: cover; font-family: "Cormorant", sans-serif; overflow-x: hidden; } html { scroll-behavior: smooth; } .nav { display: flex; width: auto; height: 70px; background-color: transparent; list-style-type: none; } .nav h1 { font-size: 6vh; text-transform: uppercase; text-align: center; } .menu { font-size: 5vh; position: absolute; right: 0; color: white; margin-top: 5vh; margin-right: 4vh; cursor: pointer; } .head { text-align: center; font-size: 15vh; position: relative; top: 10vh; } .para { font-size: 4vh; text-align: center; } @media screen and (max-width: 900px) { .head { font-size: 12vh; } .para { font-size: 3vh; margin-top: 50px !important; } } .container { position: absolute; height: 100vh; background-image: url("background2.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; top: 100vh; background-color: white; } .container2 { background-color: transparent; width: 50%; height: 100%; position: absolute; right: 0; overflow: hidden; } .container2 h1 { text-align: center; font-size: 9vh; margin-top: 30vh; margin-right: 5vh; } .container2 p { text-align: center; font-size: 4vh; margin-right: 5vh; } @media screen and (max-width: 900px) { .container2 h1 { font-size: 6vh; } .container2 p { font-size: 3vh; } }
