phernand42

Thanks for the explanation and example @ZachSaucier! This is all starting to click a little more now.

Hi Everyone, Trying to figure out how I would initiate scroll trigger if my trigger was more then half way down a page. As you will see in my codepen example, the graphic I'm trying to animate which is below the purple container has already ran through the animation timeline without any scrolling interaction. I set up my trigger to start at ".center-container" but that doesn't seem to work any longer. How would I go about finding the exact start value of my trigger or how I get it to start properly at my desired trigger point? What should happen is when a user scrolls to that section/div it will cycle through animations until the end of that container. Thanks!!

Thanks for pointing me in the right direction @mikel! Still getting the hang of this but I love it so far. Learned a lot from you all.

Hi Everyone, Having a small issue with using the pin property in scrolltrigger. I have a multi layer svg inside of a single div. When you scroll down different layers of the svg should appear and other layers should hide. I was able to accomplish this (with the help from this amazing forum) using css (position: fixed) but I'd like to see if this is possible using the pin property instead. As you can see from my pen when I scroll down all the layers appear. The scrolling svg should stop at the top of the second container div. Should I be using pin this way or should I separate the svg layers I have into separate svgs and add each in to separate divs so I can get pin to work? Thanks!

Ahh makes so much sense. Thanks so much for explaining this @ZachSaucier! Also thanks for link to doc, will read that a bit more I can now see the visibility is controlled by autoAlpha within each section.

Hi Everyone! Trying to figure out how I go about hiding layers in my svg using scrolltrigger. The effect I'm trying to go for is when a user scrolls down on page a new layer is displayed at certain points/triggers (while also keeping original or first layer displayed always). However as you can see from my pen example there are certain layers I'd to hide when scroll gets to a certain trigger, right now they overlap which I kind of expected. I've been reading up on stagger but I'm not sure how I would go about implementing with scrolltrigger. Thanks in advance!

The commented out portion. Im assuming no.

Yes! Thanks so @mikel! Did not know about autoAlpha. My apologies though for not reading documentation more throughly. Will do better next time! Do you know if this piece is still needed? tl//.from('#pt2-path', {autoAlpha: 0}) .add(animateDNA()) .add(animateDNA2()); Thanks again for the help

Hi Everyone, Sorry for all the questions but I could use a little more help. So I decided to go another path for this animation and keep it a little simple (Please see codepen below). https://codepen.io/phernand42/pen/vYGVyPp?editors=1111 However the animation is out of order and partly not working. The starting image should be a non bolded DNA image instead a bold one. When you scroll down to second box/trigger it should then bold part of the image (which is currently the starting image). When you scroll to third box/trigger it another piece or image should display (this scrolltrigger is not working for some reason). Not sure why its out of order and partly not working but could use some help. Thanks!

Ahh thanks so much @ZachSaucier! That maybe a better solution. Will give that a shot.

Hi Everyone Trying to do some simple animations of a DNA SVG graphic using scrolltrigger and morph svg. As you can see in codepen example I got it to work somewhat but the morph looks a little weird when I scroll down to second section (haven't yet added in other parts of graphic). Wondering if this is the right approach or if there is a better way to do this. Ideally when a user scrolls down small pieces of the graphic will appear (or ease in when scrolling).