Poylar

I would also like to clarify such a thing as animation with mount . framer-motion has AnimatePresence. Is it possible to implement this in gsap?

Hi, i work with react/next.js now, and i dont understand what the main differce between this both lib? framer write for react components gsap work everywhere but anyway i see a lot of sites witch react + gsap stack. Why?

thank you!!

Hi. I'm trying to have the effect that my fixed block will only appear after section:first-child and disappear if it reaches .footer, but it should also disappear if the scroll page is above section:first-child. How can I track this and do it? Or is it better to use some kind of intersectionObserver? Basically I just need to remove the .fixed block when the footer or section:first-child is in the viewport (so they don't overlap) and show it again after footer or section:first-child leave viewport

yes, this good, but a lot of code (jk) how i can add there increase marquee speed while scrolling page and return to normal speed when scrolling is done?

im sorry, i edited my topic. i dont know you are bot or real human, but anyway... I said about ScrollSmoother just so you understand that I have access to its methods, maybe this is not necessary (Just additional information) In fact, I expect just an infinite marquee with acceleration of its scrolling when scrolling the entire page, but at the same time, the marquee itself also has its own speed maybe i am looking for something like this https://codepen.io/theflash8888/pen/VwQgQWW But I can't repeat this code in my case

Hi. I'm trying to make a fully responsive marquee with gsap with increasing marquee speed scrolling on page scroll (I'm using gsap smoothScroller) I have already read a lot of topics on the marquee gsap forum, but somewhere the quality of the code leaves much to be desired. Is there any best practice to do what I want? most likely I made a mistake in the html markup. I tried increasing the timeScale in the scrollTrigger but it just didn't work. Thanks for any advice/examples

MorhphSVG working good with <TEXT> in svg?

Hi. I want to create an effect where a path line is drawn and city names appear as the line passes through the points. What is the best way to do this in this case: 1. Make svg only path line and points, and make cities separate divs 2. Make the names of cities, lines and points in one svg file and draw them simultaneously, tied to the animation time of the line itself (Or is it impossible?) Also in theory I would also like to use morphSVG here to redraw the path, is that possible? Maybe there are some ready-made examples or additional tips?

okay i make it https://codepen.io/poylar/pen/rNrNPNM you solution with push section in pinned container works, but i dont wanna break my semantic structure. so may be one more solution? I also have suspicions that pinSpacer creates space for another section (which is not) I'm sorry for being so stupid, but believe me, I've tried a lot of options and read all the documentation, but I still can't beat pinSpacer

I'm not sure we understood each other. I want to remove padding of the pin spacer I mean: if i remove all js and CSS position next section will be closer to cards, watch screenshot: i want same position with gsap animation

https://codepen.io/GreenSock/pen/abGYbGm?editors=0110 this demo from video i wanna remove this padding

thank you, that work. but how i can remove this "extra space" after section? pinSpacer make 2000px padding , can i remove this?

hi, i try to make cards effect from this website https://www.createwithplay.com/ (section on screenshot) I tried many variations but they all failed, could you help me understand how to implement this, please? I can see that position:sticky is used in the example, but I can't use it because I'm using the gsap smooth scroller plugin. At first I thought that it would be possible to pin section when I enter it, but I did not understand how I should move it up further. I think my problem is that I can't determine the start and end parameters. Thank you for any help

Hi. How i can run 'p' animations with stagger? i mean: If all p's are in the viewport, then start animating them one by one. Is it possible?

Hi. I think I write very confusing and not clear. Maybe you can give me some pointers that should be corrected. For example, I have a preloader animation, I launch it and in the last seconds of its completion I want to launch the first screen animation, but if the preloader does not exist, then I immediately want to start the first screen animation with slightly different parameters. (No jerking fromTo) I will be glad if you point out at least one mistake to me so that I can start writing better such code, because now it looks like spaghetti import { gsap } from 'gsap' import CustomEase from 'gsap/CustomEase' import SplitText from 'gsap/SplitText' import ScrollTrigger from 'gsap/ScrollTrigger' import { breakpoints } from './MatchMedia' gsap.registerPlugin(SplitText, ScrollTrigger, CustomEase) const globalGap = getComputedStyle(document.body).getPropertyValue('--gap') console.log(globalGap) const textSplit = new SplitText('.hero__title', { type: 'chars, lines', charsClass: 'oh', linesClass: 'oh', }) const { chars } = textSplit function instaAnim() { const tl = gsap.timeline({ scrollTrigger: { trigger: '.hero__content', start: 'top top', end: '70%', scrub: true, }, }) tl.to('.hero__content', { ease: 'Power.2', backgroundPositionY: '100%', }) } function onLoadAnim() { const preloader = document.querySelector('.preloader') const preloaderLogo = document.querySelector('.preloader .logo__src') const heroContent = document.querySelector('.hero__content') const tl = gsap.timeline() console.log(preloader) if (!preloader) { tl.then(() => { animAfterLoaded(true) }) } setTimeout(() => { if (preloader) { tl.to(preloader, { yPercent: -100, duration: 1, ease: CustomEase.create('cubic', '0.96, 0.02, 0.34, 0.99'), }) tl.to( preloaderLogo, { duration: 1, yPercent: -100, }, '<' ) tl.fromTo( heroContent, { backgroundSize: '140%', backgroundPosition: 'top center', }, { duration: 1, backgroundSize: '120%', }, '=' ) tl.fromTo( chars, { y: 100, }, { stagger: 0.01, y: 0, } ) tl.then(() => { animAfterLoaded(isPreloader) }) } }, 500) } const sidebarHeight = document .querySelector('.project-content__sidebar') ?.getBoundingClientRect().height function servicesSticky() { const contentHeight = document.querySelector( '.project-content__gallery' )?.offsetHeight const tl = gsap.timeline({ scrollTrigger: { trigger: '.project-content__sidebar ', start: '5% 5%', pin: true, end: `+=${contentHeight - sidebarHeight}`, scrub: true, }, }) } function chronology() { const tl = gsap.timeline({ scrollTrigger: { trigger: '.about-slider-wrapper', start: 'top center', end: 'center center', markers: true, }, }) tl.to('.about-slider-line__active-line', { ease: CustomEase.create('cubic', '0.96, 0.02, 0.34, 0.99'), width: document.querySelector('.about-slider__slide')?.offsetWidth - parseInt(globalGap), }) } function animAfterLoaded(isPreloader) { if (isPreloader) { const heroContent = document.querySelector('.hero__content') const tl = gsap.timeline() tl.fromTo('.page-heading__title', {}) tl.fromTo( heroContent, { backgroundSize: '140%', backgroundPosition: 'top center', }, { duration: 1, backgroundSize: '120%', }, '=' ) tl.fromTo( chars, { y: 100, }, { stagger: 0.01, y: 0, } ) } } function textAnimation() { const titles = document.querySelectorAll('h2, .section-heading__desc') titles.forEach((title) => { const textSplit = new SplitText(title, { type: 'chars, lines', charsClass: 'oh', linesClass: 'oh', }) const tl1 = gsap .timeline({ scrollTrigger: { trigger: title, start: 'top 85%', }, }) .fromTo( textSplit.chars, { y: 200, }, { duration: 0.8, y: 0, stagger: 0.01, } ) }) } window.addEventListener('load', () => { onLoadAnim() instaAnim() chronology() textAnimation() if (window.matchMedia(breakpoints.isDesktop).matches) { servicesSticky() } })

oh ok i just added an extra wrapper

Thanks for the answer, but I think this solution does not really help me. Any ideas?

Hi. I try to create sticky sidebar, but i have some hidden content. If i scroll block and then click 'open' text in sidebar overflow him. this cuz scrolltrigger set height == height content on init. how i can fix this? also sidebar stop pinned when hidden text cross end point. how its work?

thank you for you answer. yes I understand that this problem is probably beyond the free help on the forums, just came for advice to perhaps understand what I'm missing. I have already followed all your recommendations and the scroll stops lagging the more I remove the sliders. I thought maybe there is a solution something like: "set the overflow to hidden because without it some extra calculations occur" and so on

hi. i used smooth scroll plugin from gsap. For some reason, my wordpress site plays smooth scrolling at 10-25 fps. As I understand it happens on less powerful computers. I have the most common setup for scrolling and there are also several swiper sliders on the page. When I remove all the sliders, the lags disappear. Are there any known conflicts between sliders and smooth scrolling? I can't share the codepen or anything with you as this is my personal site. But on other sites (more complex in structure. But there are fewer sliders) everything works fine. Link to the site: http://poylar.ru/ (Caution Cyrillic) you can also enter in admin panel to watch src files http://poylar.ru/wp-admin/ gsap : gsap (if you want check http://poylar.ru/wp-admin/theme-editor.php all js files in src/js )

thank you! this solution works for me from: [0,0], grid:'auto' from: [0,0], grid:'auto'

Hi. I'm trying to implement an effect where the cards will appear from the top left corner towards the bottom right. Now all the animation goes from left to right and then from top to bottom, just like they are located in the DOM. Are there any solutions to this problem?

It's just that everything is yellow And I can't determine support for the polygon property on caniuseit. One way or another, I will try to use this, but if there are any other options for solving this problem, then I would consider them

Thanks for the answer. Yes, I know about clip-path but it is very poorly supported in browsers and I try to avoid using it.