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 ?