Alexandra Spalato

Thank you!

Thank you, going to look at it! yes I have seen toggle actions, but didn't understood it very well... this is the occasion!

Thank you! I'm definitely becoming addict to gsap and to this forum!

Hello, I'm working on this gatsby project https://falcon-lab.netlify.app/ the red letters animation has been done by someone else, and not only it slow down the whole site, but it doesn't look I would like to know if there is a way to do this in gsap, and if not what would be the best way

Thanks, I will try to do something in codesandbox tmrw

Yes I'm on mac and it fails in every browser, until I resize the window I asked a friend, and it's the same for her on which browser / computer are you ? I was on 3.3.1, and just updated to 3.3.3, but it continue failing the same way

Hello, I have taken inspiration on this https://codepen.io/GreenSock/pen/pojzxwZ to create an animation react hook. I joined the file here I have deployed the demo here https://starter-gsap.netlify.app/ and as you can see all the content disappear...until I resize the window here is a short video showing it https://share.getcloudapp.com/JruLWQzN So it seems that is only fires on resize...how to fix this ? useGsapReveal.js

Hello, I'm working on this gatsbyjs project https://cadell.netlify.app/ , the problem I have is that when I scrollup from the menu, I need to put back the text at Y:0, for that I use onEnterBack, then another problem appears, if I scroll manually, then it becomes buggy (try it) so I tried to put a conditionnal depending on the velocity, but the minumum to make it work with the first menu items is -1200, and it still slow enough to trigger the animation when I scroll manually ...I don't know if it's very clear...in other words I need to trigger the animation to put back the text in place, onEnterBack, only if the event comes from the menu scrolling and not from a manual scroll... I have tried with velocity, but perhaps there is better ways... here is the repo https://github.com/alexadark/cadell/blob/master/src/templates/page.js and 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: true, pin: true, // markers: true, ease: "power4.out", onEnterBack: self => self.getVelocity() < -1200 && gsap.to(".text", { duration: 1, y: 0 }) && console.log("anim"), }, }) tl.fromTo( section.querySelector(".text"), { y: 0 }, { duration: 1, y: "-80%" } ) })

yes, thank you!

Thanks, I'm the dev on this one, I will buy my licence for my themes, but if how to use a club plugin for a public repo then ? it's not possible as if the file is not on github, it cannot be deployed... is there a solution for that?

These are the questions, IDK how to accomplish that... I have searched, but IDK how to couple an animation that happens automatically when enter the viewport (the image fade in up), then continue being controlled by scroll (fadein out on scroll) and reverse on scroll down...

Finally, the client don't mind about the image part scrolling independently, and I don't think it would be possible, as they will have not more images than text sections so finally I have done this https://codepen.io/alexadark/pen/pogJVww I think he will like it, but what I would like to accomplish, is - when a section enter the viewport: the image fade in up, and when we scroll the section then the images moves up and perhaps fades out just before leaving the viewport... and the effect reverse when we scroll up in the other way so basically the image to fade in and to arrive in the center of the viewport it happens automatically as soon as the section is in the viewport, then on scroll it continues going up and fades out, so for the second part the scroll controls but if we reverse the scroll, then the scroll should control all the mouvement but in the beginning it needs to be automatic or we don't see any image without scroll ...Sorry I have really difficulty to describe it in words ?

The people I work with are all on mac...a part one bit he is on linux so no IE anyway not a big deal, in the beginning I didn't wanted to support IE, the the client realize that 15% of new visitors came from IE I will suggest to have a something suggesting this people to switch to a modern browser

Yes, but it's on browserstack as I don't have a PC the designer is preparing a fallback with svg if we don't have another solution

Hello, I'm beginning a new project that I will build in gatsbyjs, but for the moment I'm doing a Proof of concept on codepen on the right side we have text sections, and the top menu scroll to the sections the clients want that when we go to a section, the image on the left bump up, and then when we scroll, the left panel with images scroll faster, so I have pinned the text sections but I'm not having the initial slide up image,(but a little bug that make the image jump to the right, I also need to correct that) and also when I continue scrolling the section after overlaps the text which I don't want, so I imagine I have to put the end of the pin in another point but IDK exactly where.... Then they also want to be able to scroll the left images independently ... this is hapening when I arrive on section 4, (it seems that it's still pinned) but I don't want it like that I want to scroll trough the images only if I scroll from the left part, but if I scroll trough the right part or trough the menu then it has to scroll as described in the beginning after that I will have all in a loop it will be much better, but I'm just testing things! I hope it's clear, as it's not so easy to describe...and I hope myself that I understood the client... and of course I'm quite beginner in animation so excuse me if I ask basic questions ! Thanks in advance!

yes, it works now! you're the best ? I just have the svg looking like that https://share.getcloudapp.com/X6uoJ86D but this is not because of gsap, however if you know why please tell me!

Last thing, unfortunately my client required IE11 support at the last moment, and it seems that it doesn't support the scroll trigger this is what I see in browserstack https://share.getcloudapp.com/yAuYxLvk Also the svg images are looking bad, don't know what to do, I hate IE

Thank you so much! It's now really good https://codesandbox.io/s/gsap-playground-86s1u and I'll implement it tomorrow in the real project! I have to say that I'm amazed by the quality of support you are providing! so good and so fast! Thank you again !!! ?

Thanks, I tried doing slideTwo taller (here from 100vh to 300vh) but then once the animation has finished we have to still scrolling and that's not good so I tried adding pinSpacing: false but then the content after (here I made a third slide) never appears, and the animation doesn't finish So here I reduce the height of slideTwo to 100vh at the end of the animation , but then we have blank space between slideTwo and slideThree...what is the solution? About the duration, why do we need to write them like that? and what their utility when the duration is droven by the scroll ? By the way, if I buy the smaller licence, can I upgrade later? I'm building premium themes for gatsby and if I use it there I will need the business green licence For the premium themes, do I need the licence for any use of gsap, or only for club plugins ?

Hello, I'm working on this project https://falconlab.netlify.app/ and the red letters writing effect has been done by somebody else has an svg animated, the svg standalone animation loops. but here it doesn't so I would prefer to do it with gsap to have a better control what would be the best way ? drawSVG plugin ? and in this case how to prepare the svg file a path for each word or would it better work with the split text plugin ? Thanks in advance!

Hi, I have successfully done it in codesandbox https://codesandbox.io/s/gsap-playground-86s1u but compared to what the other guy did, my arrows are drawing to fast https://falconlab.netlify.app/ basically I would need something to slow down the scroll... how can I accomplish that I tried to put a longer duration on the draw svg but didn't work and the other point is that I'm repeating the same code for each element, is there a way to user stager here ?

Great! in codesandbox I would like to try with a gatsby project as this is my usual tool so how can I have it, as normally it works with npm modules also why didn't it work with codepen project

Hello, I'm working on a project in gatsby that will need drawSVG, https://falconlab.netlify.app/ , the second slide with the arrows, somebody has done this animation from scratch, the problem is that it's not really compatible with gatsby, I have successfully integrated it putting inside the static folder, but I have already seen that it can break, so I want to do it with gsap I'm trying the drawSVG plugin in the pen https://codepen.io/alexadark/pen/gOPbLWo on one arrow (I also tried with projects https://codepen.io/alexadark/project/editor/DKKpmL#0 , but it doesn't work) so the problem I have here is that the arrow is not part of the path so it's already there before the line is drawing how can I solve that then I will use it with the ScrollTrigger plugin Another question, is it possible to test plugins in codesandbox with a gatsby ptroject ? And finally I would like to know if gsap it's the best way, or if I could keep the animation from scratch, and in this case is there a way to integrate it properly in gatsby (it's an html file, that's why I had it in static, it's the only way I found, I join it here) the guy who made it told me that gsap takes a lot of CPU+GPU poer causing animations to stutter on slower laptops, and that'brandAnimation.htmls why he prefers to do things from scratch...what can you tell about this

I saw it, but now looking better I found the solution, I need to put the register plugin into useEffect like that, and now all work the same in develop! useEffect(() => { if (typeof window !== `undefined`) { gsap.registerPlugin(ScrollTrigger) gsap.core.globals('ScrollTrigger', ScrollTrigger) } let tl = gsap.timeline({ paused: true, scrollTrigger: { trigger: '.slideOne', scrub: true, pin: true, // markers: true, start: 'top top', end: 'bottom top', }, }) tl.to('.overlay', 2, { backgroundColor: 'rgba(0,0,0,.85)' }) tl.to('.textOne', 1, { y: -300, autoAlpha: 0 }, 0) tl.to('.textTwo', 1, { y: -300, autoAlpha: 1 }, 0.5) }, [])

Hello, I'm working on a gatsby project, I first did the animation with scrollmagic, but now I wanted to better do it with the new ScrollTrigger plugin it works, but I struggled as on develop first pin and scrub wheren't working after I made a build, then it was working but the animation doesn't work perfectly on develop this is the online version, so after build https://falcon-lab.netlify.app/, here all is fine but on my computer after running gatsby develop it doesn't work the same https://share.getcloudapp.com/DOuAedyZ here first scroll is the develop version, and second scroll is the built version so even if it works, it makes hard to develop, or I will need to first do everything in html I have attached the component file Thanks in advance! ? Parallax.js