Banddev

I would like to use scrollsmoother and I have a footer with position fixed. the main tag with a bigger z-index so it can be above the footer. this is a simplified working example of what I would like to achieve without scrollsmoother > https://codepen.io/mp1985/pen/MWZmqMo I tried to add scrollsmoother and to play around with it, but I was not able to achieve the same thing. I tried to move the fixed element outside scrollmoother div, and play around with the bottom, the margin-bottom and the position proprieties but no luck > https://codepen.io/mp1985/pen/ZEVKqQv What I am doing wrong? could you please point me in the right direction? thanks

thanks @Rodrigo how can I check if it is a performance issue or just something wrong with my code? do you think that an infinite animation on 28 elements will have a crazy impact on performance and can cause this problem? is there too much going on and the browser can get mad with the calculations?

I have an infinite marquee animation on all sides of the page. The linked animation is jerky or isn't totally smooth, sometimes the repeat is not working well so you can easily see that there is something wrong, basically the repeat jump/glitch in a weird way the problem is that it is not happening all the time, but sometimes, so I am unsure how to show you the issue. maybe it uses too much CPU, can't keep going with the calculations, and it gets mad? is there a more "CPU efficient way" to do this animation? I feel like I am overcomplicating a simple animation but I am not sure how to improve it in order to make it smoother. thanks edit: I created a screencast video so it would be easier to see the issue see >

I want to reveal each column with a stagger effect, each column should fade in when they appear in the viewport using scrolltrigger. but it seems that I am doing something wrong because the 2 columns on the same row, fade in at the same time, with no delay between each other. how can I ensure that each column reveals with a different delay and create a staggered effect? is this wrong? did I misunderstand the work of "stagger"? ? const anims = gsap.utils.toArray('.img-container'); anims.forEach((anim) => { gsap.set(anim, { y: 40, opacity: 0}); ScrollTrigger.create({ trigger: anim.parentElement, start: 'top bottom-=100', end: () => `+=${anim.clientHeight }`, markers: true, onEnter: () => { gsap.to(anim, {y: 0, opacity: 1, duration: 0.6, stagger:1}); }, }) }); thanks

ok, I think that I found the answer. if i use "height: 0; overflow: hidden;" instead of "display: none;" , it works well. is this a best practice with Scrolltrigger?

thanks @Rodrigo, I think that I found out why it is doing this. I created a simplified codepen just with this. https://codepen.io/mp1985/pen/BaPdLYp the issue is caused because in the CSS I hide the last li in the list and because of this Scrolltrigger adds a start point at the top of the page. If I delete this CSS code, everything works as expected .row .col-4:last-child { display: none; } is there something I should be aware of when I want to hide/show elements with CSS? any idea why is doing this? basically, I would like to play around with media queries and show/hide elements. thanks

thanks @Rodrigo @Carl i didn't know about onEnterBack and onLeaveBack. I will defo take a look at Carl's GSAP courses. I updated the codepen https://codepen.io/mp1985/pen/oNMWZNN , now it works, but I am not sure if there is a nicer way to write that code. I have a bigger issue now, I can't understand why it is doing this, for some reason, when I land on the page, I can see the scrolltrigger "start/end" at the top of the page (even if there is not any trigger element there). if I scroll down, and I scroll back up, and again scroll down and up, the scrolltrigger code works as expected; the problem is only when I land on the page and I didn't scroll till the next section. any idea why it is doing this? I can't replicate this on codepen, I upload a screenshot and a screencast here https://we.tl/t-RPnHGNxJIj. from the screencast you can see that the logo and the burger is grey when you land on the page, then you scroll and scroll up and the logo is correctly white. the problem is just when you land at the top of the page. is it a common issue with an easy fix? is there any sort of "trigger" that I can call to "fake refresh" the page? could you please point me in the right direction?

I am stuck with a weird issue. I would like to change the colour of the navbar based of the position of other elements. I am able to achieve the basic, one section after the other, all good with this. My issue is that I would like to trigger a different behaviour with some elements within a section. (a section within another section) it kind of works but only when I scroll down, when I scroll up doesn't work. could you please point me in the right direction?

ah this was the reason ?, thanks @Cassie ?

thanks @Cassie ? I updated my codepen https://codepen.io/mp1985/pen/yLEjJyy and it is 90% working, but for some reason the first 2 letters are not animated anymore. I followed the exact same steps as the others letter, if I remove the <clipPath> tag, i can see the stroke, so I think that the svg is right, but there is something else that cause this issue, any idea? moreover, can I create the svg right directly in illustrator or I will need always to do some fine-tunings on the code? I think that I am missing a step on how to create the svg right directly in illustrator. let say that I have a rectangle (with the fill) on a layer, on a new layer I draw a path, and I increase the stroke in order to have it big enough to cover the rectangle (see attachment), what is the next step? select both layers and then click "object > Clipping mask > make"? could you please point me in the right direction? thanks test-gsap.svg

hi @PointC I think that I am a similar question, I am stuck I created a similar codepen https://codepen.io/mp1985/pen/wvXjwBp the problem is that as you said drawSVG only works with strokes - not fills. So I tried to play around with your suggestion "create a mask for the text and animate the stroke of the mask to reveal the filled path". In illustrator I have a layer with the fill elements, and on top a new layer where I draw with the pencil the stroke and then I increased the stroke in order to cover all the elements. here you can see the other codepen > https://codepen.io/mp1985/pen/JjZvdJG , the animation works, but I don't understand how I can mask and show the other layer instead of the strokes one. I even tried to play around with the clipping mask in llustrator, and then try to animate the mask with Gsap, but no luck at all https://codepen.io/mp1985/pen/mdKLeqa I think that I am missing a step on the way how to create the svg file in illustrator, could you please point me in the right direction? What I am missing? thanks

Thanks @akapowl , (sorry for my late reply), yes it is kind of what I was looking for, the problem is that it is a big website so wrapping every element in another element won't be ideal because I will need to do this xx times, of course I could do this directly in JS but I was looking for a more straight forward solution. is it not possible to set a sort of offset? (i think scrollmagic has this option) I was able to do this with the "end point" basically I add the same amount of pixel (in this case 30) that I set for the animation at the begging (so now the "end point" matches the end of the element even with the animation). https://codepen.io/mp1985/pen/QWxqdKQ but I don't understand if I can do the same thing with the starting point, is it possible?

Hi, I am stuck with a "stupid" thing. I started to use Scrolltrigger recently, so I am still learning. I just would like to do a reveal effect while you scroll, revealing each section with opacity and a little negative transform. without the transform, everything is working as expected (start and end match), with the transform the starting point of each section is wrong. Could somebody point me in the right direction? I created a codepen so it is easy to understand https://codepen.io/mp1985/pen/jOKBWyw

Hi, I think that I overcomplicated my life. ? I have a carousel, and I would like to animate only the current (active) slide. In css i can do this, but I have not the full control of the timeline, for this reason I would like to achieve this with gsap. the carousel add a class (slick-current and slick-active) on the current slide by default. how can I play the timeline only for the element that have this class? I created a simplify codepen, my timeline is longer (with question and answers as a chatbox), but as I said, I think that I overcomplicated my life, I have the feeling that this is not the best way to achieve what I am looking for. could you please point me in the right direction? thanks

thanks @mikel, I am sorry if my message seemed abrupt, it was not my intention. much easier/better your solution, thanks again. this more or less is what i was looking for > https://codepen.io/mp1985/pen/gOboPQe

I am trying to recreate the instagram loading for the stories with gsap. Something similar to this https://codepen.io/inertia/pen/MvGOeJ?editors=1100 (but better ) I have 2 circles with the stroke, but I am having problems to draw a dashed line with drawSVG. what I am doing wrong? do you have any suggestions? thanks