Alexandra Spalato

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! https://codepen.io/alexadark/pen/LYGXxQp

Thank you! I have done it with css https://codepen.io/alexadark/pen/LYGXxQp 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

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...)

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...

Thank you! going to look at this!

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

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 https://codepen.io/alexadark/pen/LYGVJvK but has the content and css are not there, It looks really bad

Ah ok, I didn't know that I could put several scrollTrigger it works! thanks

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!

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

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

I made a codesandbox like that, but it doesn't work https://codesandbox.io/s/scrollto-different-pages-j0n40

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

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 ?

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 ?

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

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

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

Yes, got it thanks!

So I also need the licence to publish hooks with no club plugins ? I was waiting to publish the themes to buy it

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

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 https://codepen.io/alexadark/pen/QWyGNZj 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 https://codepen.io/GreenSock/pen/zYrxpmb 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 }), }) }, [])

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...

here is a pen that does the same as the site https://codepen.io/alexadark/pen/LYGVJvK 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

@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!