Jump to content
Search Community

phernand42

Members

  • Posts

    11

  • Joined

  • Last visited

 Content Type 

Posts posted by phernand42

    Issues with scrolltrigger start

    in GSAP

    Posted

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

    See the Pen eYzMEVM?editors=1010 by phernand42 (@phernand42) on CodePen

    Question about pinning and scrolltrigger

    in GSAP

    Posted

    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!

    See the Pen eYzMEVM?editors=0010 by phernand42 (@phernand42) on CodePen

    Hiding Layers

    in GSAP

    Posted

    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!

    See the Pen XWdOdvQ by phernand42 (@phernand42) on CodePen

    Animate SVG using scrolltrigger and morph

    in GSAP

    Posted

    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

     

    Animate SVG using scrolltrigger and morph

    in GSAP

    Posted

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

     

    See the Pen vYGVyPp?editors=1111 by phernand42 (@phernand42) on CodePen

     

    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!

     

    Animate SVG using scrolltrigger and morph

    in GSAP

    Posted

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

    See the Pen eYZjaJO by phernand42 (@phernand42) on CodePen

×
×
  • Create New...