Poylar

November 10, 2023

On 10/27/2023 at 4:25 AM, GreenSock said:

I'm not a big fan of criticizing other animation libraries and I honestly don't know much about framer-motion, but here are some general thoughts (keep in mind this is totally biased):

GSAP is framework-agnostic, meaning you can use it ANYWHERE. Literally animate anything that JavaScript can touch. I think framer-motion can only be used in React. So if you learn GSAP, your skillset can transition to any project whereas framer-motion skills will be limited to React projects.

I hear people say that framer-motion is very easy to use in React especially for simpler effects whereas GSAP requires a little bit more of a learning curve due to the way React works (cleanup, code structure that it requires, etc.) However, once you see how it's done (see https://gsap.com/react), it's really not hard. My guess is that framer-motion's syntax feels more "React-y" for React folks that are already used to that ecosystem. GSAP's syntax is universal.

GSAP has a lot more capabilities. Timelines, morphing, flip, SVG, runtime controls, blah, blah - basically, animators can feel very confident that whatever the client asks for will be possible with GSAP. It's robust and super flexible.

GSAP has a very long track record of ongoing support and innovation. These forums have almost 200,000 posts and we've been around for 15+ years. We've got a funding mechanism in place (Club GSAP) to ensure that the project is safe. Trust is a big deal when you build on an animation framework - you wanna be confident that when you run into an issue/question, people are there to help and the project won't get abandoned. I have no idea how framer-motion compares in that regard...I'm just saying GSAP is solid. A lot of people use framer-motion too so I'm sure you could get questions answered somewhere, I'm just not familiar with where or if there's a funding mechanism that'll help it last for years.

A huge number of the top award-winning sites use GSAP, so the top-tier developers sure seem to like it and there's probably good reason (you'd have to ask them). We hear from many of them that they tried various other animation frameworks and eventually ran into problems and they keep coming back to GSAP because they just trust it. Things "just work" and it gives them a ton of flexibility. Again, I'm not saying framer-motion is bad in this area at all.

I don't know if this is accurate, but I've heard people say that GSAP definitely performs better under load (speed). 🤷‍♂️

I really do hear lovely things about framer-motion in the React community and the author is a very sharp guy. I'm sure that for certain projects, it's a fantastic option. I don't mean to discourage you from using it. But obviously I'm a much bigger fan of GSAP. 💚

This page might have some details that'd prove helpful in your decision making (it doesn't compare it with framer-motion specifically; it's more about why a lot of people choose GSAP).

You're probably in good hands either way for most things.

Good luck!

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?

October 26, 2023

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?

March 17, 2023

18 hours ago, mvaneijgen said:

I've created a class .show and when that is triggered it will play an animation on the .fixed element. That animation is paused and hidden with CSS, so that it doesn't show on page load.

Then it is just a question of checking where you want your triggers, I've set them now both to the bottom of the view port, so as soon as the top of the element hits the trigger it is shown and again when the end is triggered it is hidden. And I do this for both the enter, leave, enterBack and leaveBack.

I've made it a separate timeline that gets controlled by multiple ScrollTriggers, you could probably create the ScrollTrigger in the timeline and have each ST control a new timeline, but this seemed a better way of handling it to me. Also instead of classes I've created a timeline animation because well GSAP and that is what we're all about 😝 Hope it helps and happy tweening!

thank you!!

March 16, 2023

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

See the Pen XWPqvEg by poylar (@poylar) on CodePen

January 6, 2023

37 minutes ago, GreenSock said:

Do you mean something like this (from one of the links I already shared above)?:

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?

January 6, 2023

11 minutes ago, GSAP Helper said:

Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:

A clear description of the expected result - "I am expecting the purple div to spin 360degrees"

A clear description of the issue - "the purple div only spins 90deg"

A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container"

You said you're using SmoothScroller (I assume you meant ScrollSmoother) but I didn't see that anywhere in your code. I'm not exactly sure what you're looking for, what's not working the way you want, etc. Do you have links to the other marquee effects you're pulling from? What do you mean by "scroll acceleration" and "pro scroll page"?

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

See the Pen VwQgQWW by theflash8888 (@theflash8888) on CodePen

But I can't repeat this code in my case

January 6, 2023

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

See the Pen OJwbjZq?editors=0011 by poylar (@poylar) on CodePen

December 28, 2022

33 minutes ago, Cassie said:

Hi Poylar!

I'd probably put everything in one SVG, nice and tidy and easy to scale.

To tie the 'dots' in to the line animation is very doable - basically what GSAP excels at - sequencing! You'll need to look into a timeline and the position parameter

And yes, that's what morphSVG is for, morphing SVG elements ☺️

This all sounds very acheivable.

MorhphSVG working good with <TEXT> in svg?

December 28, 2022

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?

See the Pen ExpPejL by poylar (@poylar) on CodePen

December 20, 2022

24 minutes ago, mvaneijgen said:

Yes but you're pinning the container and then moving the elements up, so there will be a gap at some point.

You can set pinSpacing: false (see docs https://greensock.com/docs/v3/Plugins/ScrollTrigger), but this will probably not do what you think it does.

I think the best solution would be to have the element you don't want to have spacing to be part of the pinned container (see my last codepen), but this will change everything, so the best thing to do again is to remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

Explaining al this in text is really complicated, it is much easier to help you if you provide a minimal demo, this way we can see your thought process and better see how we can help you. A minimal demo is something you've made and tried somethings to show what you've already tried. The best way to learn is to get your hands dirty and trying new things! Codepen is amazing for this, because you can just keep forking your pens and trying out different solutions.

okay i make it

See the Pen rNrNPNM by poylar (@poylar) on CodePen

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

December 20, 2022

6 minutes ago, mvaneijgen said:

Yes that is a demo, but we want yours, because your example probably doesn't look like this example.

If you want the next section to not have any spacing you'll will have to make it part of the section you're pinning.

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

December 20, 2022

2 minutes ago, mvaneijgen said:

I don't know I can't see what you're looking at. Can you provide a minimal demo?

See the Pen abGYbGm?editors=0110 by GreenSock (@GreenSock) on CodePen

this demo from video

i wanna remove this padding

Screenshot_12.png.d3bcbec965d4f1ca76520dad0b17f461.png

December 20, 2022

1 hour ago, mvaneijgen said:

Have you seen the latest video from the Greensock Youtube channel? It demonstrates this exact websites effect and how to build it with GSAP!

The gist is as follows. Just build the animation first worry about scrolling later. Hope it helps and happy tweening!

thank you, that work. but how i can remove this "extra space" after section?

pinSpacer make 2000px padding , can i remove this?

December 20, 2022

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

See the Pen rNrNPNM?editors=1010 by poylar (@poylar) on CodePen

November 18, 2022

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?

See the Pen bGKYwyy?editors=0110 by poylar (@poylar) on CodePen

November 17, 2022

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()
  }
})

November 16, 2022

oh ok i just added an extra wrapper

November 16, 2022

On 11/12/2022 at 5:36 PM, mvaneijgen said:

I see what you mean. I don't know a solution for how to recalculate the height of the element, that is been set to fixed with ScrollTrigger, but I would work around that.

I've restructured your code a bit, add some CSS and created an animation for the element in question. I've given the element .hidden-text the same styling as the aside and just animate that from a height of 0, this way it looks like the aside element is growing and this has the same effect as if the height of the aside it self would grow. (You need to tweak the CSS a bit to make it perfectly match your original CSS)

Hope it helps and happy tweening!

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

Any ideas?

November 11, 2022

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?

See the Pen JjZNEBr by poylar (@poylar) on CodePen

October 30, 2022

5 minutes ago, Cassie said:

Hi there!

Performance is an incredibly deep and complex topic and I'm afraid we can't offer free performance consultations here.

You're welcome to contact us directly for custom consulting - Our rate is $250/hour with a 4-hour minimum.

If that's not an option, some tips.

Remove code bit by bit until you find the source of the problem (Sounds like you've nailed it down to the sliders)

Are the sliders animating anything other than transforms and opacity? If so, refactor them to only animate using transforms and opacity (these are the most performant properties to animate)

Are the images in the slider too large? If so reduce the size of them

Are there any error messages to look into?

At the end of the day, the more animation and more code and more images you have, the more a browser will struggle. So sometimes the answer is simply just 'do less'

Hope this helps!

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

October 30, 2022

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 )

October 28, 2022

25 minutes ago, mvaneijgen said:

Stagger is an object on it self which has a lot of settings! If you just give it a value it will set the each: property to that value, but you can break it out to their individual properties. In the demo I've created an object from the stagger property and set each to your 0.1 and from: "random" which means it will randomly stagger them in, but there is a lot more options that are explained in great detail on the documentation page, there is a video and an interactive demo to show you what is possible with the stagger property https://greensock.com/docs/v3/Staggers

thank you! this solution works for me

from: [0,0],
grid:'auto'

  from: [0,0],
  grid:'auto'

October 28, 2022

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?

See the Pen poKJRvm?editors=1010 by poylar (@poylar) on CodePen

October 24, 2022

9 minutes ago, mvaneijgen said:

Seems fine to me https://caniuse.com/css-clip-path. If a browser doesn't support it, there is no issue, it will be just a content block, without an animation.

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

October 24, 2022

22 minutes ago, mvaneijgen said:

Have you ever worked with clipPath? Seems like that could be a cool effect and this will not scale your content. The most important part is that in your CSS and in your JS the clipPath has the same amount of points. I've also changed your .to() to .from(). Here is a visual clipPath tool https://bennettfeely.com/clippy/ I like to use instead of writhing clip paths by hand.

You can even do something like this, by offsetting what the middle points are of the clipPath

Hope it helps and happy tweening!

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.

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Poylar