Alexandra Spalato

July 18, 2020

Thank you so much!

after doing it in gsap I've decided to do it in pure css as it is simple, as the project as no other needs of gsap, so I don't have to install it

also thanks for the video about the position parameter, very usefull!

See the Pen LYGXxQp by alexadark (@alexadark) on CodePen

July 18, 2020

Thank you!

I have done it with css

See the Pen LYGXxQp by alexadark (@alexadark) on CodePen

now the problem I have is that is a bit jumpy/buggy because of the margin that I remove and put back to do like in the design ... but in the design it's smooth

how can I make this movement smooth

certainly something about timing and ease, but I have tried several thing and it still not smooth

July 17, 2020

I have fix the first part, even if I don't understand why it doesn't work with the class (and I would prefer to do it this way as now I have to write 2 animations instead of one...)

July 17, 2020

Hello,

I need to make this animation https://xd.adobe.com/view/c5ade23b-c17f-40b7-80b9-c6d6c06ac590-90fe/ (hovering the logo, look at the one in the footer for better visibility)

so I applied a class anim on hover, and for the moment I just try to rotate it of 90deg, it works with the normal class, but not with the other class

second problem, as you can see the border-radius of the elements are changong on hover, but I just found that borderRadius prop doesn't work with svg...how can I accomplish that

then there is other stepts, but these are the 2 first problems that I need to solve...

See the Pen yLeRGQJ by alexadark (@alexadark) on CodePen

July 12, 2020

Thank you!

going to look at this!

July 12, 2020

Hello,

I have this grid with filters https://thefalconlab.netlify.app/our-work/

the clients want it to animate like that on filtering http://falcon.vserve.co/

is there a way to do that with gsap

I tried with framer motion, adding a shuffle on projects and using the positionTransition prop, but it doesn't work

June 29, 2020

it works https://cadell-pin.netlify.app/ and this is what the client wanted :-)

but now he has another request, he wants the image to disappear more or less when the text has finished scrolling, but has the text has different lengths depending on the sections, sometimes the image disappear later

basically he likes how it works on the section 3 " advice when selling"

I could do it, by doing one timeline by section, and fine tunning for each one

but I'm sure it can be done better more efficiently

this is the code

 sections.forEach(section => {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: "bottom top",
          scrub: 1,
          ease: "power4.out",
          // markers: true,
        },
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: "50% top",
          scrub: true,
          pin: section.querySelector(".painting"),
          // markers: true,
          pinSpacing: false,
        },
      })

      tl.to(section.querySelector(".text"), { duration: 1, y: "-30%" })
      tl.to(
        section.querySelector(".painting"),
        {
          duration: 1,
          y: "-50%",
          opacity: 0,
        },
        "-=0.5"
      )
    })

So basically I want the tween on painting to begin when the text is nearly scrolled to the end, but IDK how to write that...

I made a pen, with the same code

See the Pen LYGVJvK by alexadark (@alexadark) on CodePen

but has the content and css are not there, It looks really bad

June 27, 2020

Ah ok, I didn't know that I could put several scrollTrigger

it works!

thanks

June 27, 2020

Hello,

I'm working on this project https://cadell.netlify.app/

this is the animation code

sections.forEach(section => {
     
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          // start: "top-=10% top",
          start: "top top",
          end: "bottom top",
          scrub: 1,
          ease: "power4.out",
        },
      })

      tl.to(section.querySelector(".text"), { duration: 1, y: "-30%" })
      tl.to(
        section.querySelector(".painting"),
        {
          duration: 1,
          y: "-50%",
          opacity: 0,
        },
        "-=0.5"
      )
    })

I would like to pin the image on the left without pinspacing, but unpin it before the end of the timeline, basically before the next section overlaps

Is this possible ?

having a different end for the pinning

Thanks!

June 25, 2020

I understand that I have first to be on the right page, it will no go automatically like the native behaviour

June 25, 2020

Hi @mikel,

Thank you but I don't really understand the sense of your demo...

what I need is to scroll between pages, https://cadell.netlify.app/

here I use the native behaviour with scroll-behaviour: smooth

which doesn't work on safari, which is why I wanted to use something else

but here the url are for example on the more page 'more/#artists'

so if you are on the home page and click in the more submenu artists, it goes to the artist page and scroll to the section

then if I'm on the more page and click on the top menu which is the sections of the home page it changes pages and goes to the section, as I put the url like that '/#sellingAdvice'

They are all relative urls

and this is what I have reproduced in the codesandbox demo

but this type of url seems not to work with the scrollTo plugin, this is what I mean

let me know if you have a solution

June 25, 2020

I made a codesandbox like that, but it doesn't work

https://codesandbox.io/s/scrollto-different-pages-j0n40

June 24, 2020

Yes, because now it's not using the plugin, it's just the native behaviour....which doesn't work in safari

but I have tried with the plugin and it doesn't work with this type of url, only with the ID directly

OK, for the demo, I will see what I can do

June 24, 2020

Actually I tried and it doesn't

this is the website, here I use the native scroll, with scroll-behaviour: smooth, but it doesn't work in safari

as you can see as there is to pages my urls are like that: '/#someId' when it's home page, or 'more/#someId' when it's more page, and this doesn't work with scrollTo plugin

how can I do that ?

June 20, 2020

Hello, I'm working on this project (gatsbyjs) https://cadell.netlify.app/

all links are scroll links
there are only 2 pages, the home and the more
so when I'm on home I need to access the more submenus and when I'm on more I need to access the other top links which are scrolling links from the home page
I use this npm module for that https://www.npmjs.com/package/react-anchor-link-smooth-scroll

but it doesn't work for this case

would the scrollTo plugin work in this case ?

June 19, 2020

Hello,

I'm developing this project in gatsbyjs https://falconlab.netlify.app/

I have done the other animations, but the one with the red letters has been done by someone else and badly

so it's put down the website performance and doesn't loop

I would love to do it myself, but I'm not a designer and IDK how to build the svg (I read that we need to make masks etc...)

Can somebody help me and how much will it cost ?

2 solution, or doing it entirely,

or giving the steps to build it myself (preferred solution)

on

- 1 preparing the svg

- 2 animating this way

I don't have Illustrator

but affinity designer or figma

Please DM

June 19, 2020

Hello, it's nice but how to do that as I don't know how to build the svg, I'm not a designer, IDK how to use illustrator

I'm about to buy affinity designer, but IDK how to use it

I'm happy to pay somebody who can guide me to build the svg and animation, as my client want it, and the other people he hired produced things that doesn't work with my code

June 17, 2020

Great, so in the next release, no need to refresh right ?

btw, the problem is only on react projects, so the codepen has no problem, it happens only on the codesandbox one which is in react.

it's good as I have learned about refresh() on the path :-)

June 17, 2020

Yes, got it :-)

thanks!

June 17, 2020

So I also need the licence to publish hooks with no club plugins ?

I was waiting to publish the themes to buy it

June 17, 2020

Great, thank you!

the refresh fix it totally ?

am I allowed to publish these type of hooks with gsap on npm ?

it will be usefull to reuse accross projects and of course to share.

I imagine I will need the business licence, to use it in our premium gatsbyb themes

June 17, 2020

Hello,

I have setup a react codesandbox, and the same problem happens

https://codesandbox.io/s/91ct7

to see really the problem go to the full screen url https://91ct7.csb.app/ as sometimes it works in the sandbox until you reload the browser

It doesn't happen in basic html

See the Pen QWyGNZj by alexadark (@alexadark) on CodePen

it also happens on other animations onEnter, for ex here https://cadell.netlify.app/more

I did a batch animation on the 3 boxes in the middle , taking example here

See the Pen zYrxpmb by GreenSock (@GreenSock) on CodePen

like that

useEffect(() => {
    if (typeof window !== `undefined`) {
      gsap.registerPlugin(ScrollTrigger)
      gsap.core.globals("ScrollTrigger", ScrollTrigger)
    }
    gsap.defaults({ ease: "power3" })
    gsap.set(".confWrap", { y: 50 })

    ScrollTrigger.batch(".confWrap", {
      onEnter: batch =>
        gsap.to(batch, {
          opacity: 1,
          y: 0,
          stagger: { each: 0.15 },
          overwrite: true,
        }),
      onEnterBack: batch =>
        gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }),
      onLeaveBack: batch =>
        gsap.set(batch, { opacity: 0, y: 100, overwrite: true }),
    })
  }, [])

June 16, 2020

Another problem I have is that sometimes when scrolling (specially with the menu) things end up totally messed up like that https://share.getcloudapp.com/xQuDWQ1k

and I really need to prevent this...

June 16, 2020

here is a pen that does the same as the site

See the Pen LYGVJvK by alexadark (@alexadark) on CodePen

I tried the toggleActions, but they don't seem to work when the movement is controlled by scroll

so onEnterback I put back the right side at y 0, for when people use the menu to scroll up, the text need to be in place

but if I scroll up it becomes jumpy

with the velocity < -1200 it's not so bad, but if I scroll up to fast it's jumpy again

June 15, 2020

@Carl I'm a video learner, so I definitely will look at your courses :-)

I have the one from Ihatetomatoes which I like, but it's good to have different sources!

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Alexandra Spalato