Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

animationmagic

ShockinglyGreen
  • Posts

    9
  • Joined

  • Last visited

About animationmagic

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

animationmagic's Achievements

  1. Hi everyone! I've got 2 issues: 1. The second ScrollTrigger animation on my page (the purple section) has their markers off. Although it is set to start "top 0" it starts way below. 2. The second animation has lots of white space underneath it created by the pin spacer. Is there a way to hide that scroll space? Thanks so much!
  2. That makes sense! Thanks for your help @akapowl - saved the day:)
  3. Thanks so much @akapowl that works GREAT. When I enable smooth scrolling with it, it seems to be causing an issue though. Did that happen to you before too? I think I can disable smooth scrolling for now, but would be great to know how you deal with it:) https://codepen.io/lisaschumann/pen/qBjzVyj
  4. @akapowl thanks so much that works great and now the animation stops once you've scrolled through once:) Loving the dogs! Once the animation goes to the onLeave function it jumps to the next section underneath though. Is there a way to avoid that jumping?
  5. Hi there, I'm trying to have this ScrollTrigger animation run only once when the user scrolls down the first time. When they scroll back up, all elements are meant to be static without any animations anymore. Basically, I only want to have the animation on scroll work only once. When I use once: true however it adds all the white space above the section on scroll up. Can you help?:)
  6. @nico fonseca thanks so so much for this! super helpful. Loving the waves too! And thank you @GreenSock for pointing me to the other thread.
  7. Thanks so much Jack for such a detailed explanation. I feel like I'm understanding a bit more. I then thought it might be a solution to create all SVGs in one illustrator file and export that so that it would all be within the same viewbox, but that seems to have made it worth, and I feel as though I'm missing the understanding of how I would center items within the SVG in the middle. https://codepen.io/lisaschumann/pen/KKqMMoe Earlier I only got the light to fit near the middle by nudging it and then exporting it again in Illustrator. Also, my line is still jumping when it repeats rather than flowing like in this demo https://codepen.io/ekfuhrmann/pen/JjbYLgg I'm sorry for so many question, I really appreciate your help!
  8. Thanks for the warm welcome @nico fonseca That's brilliant, now it is moving along to the middle. How come I have to setting the start to 0.5 makes sense to me, but how come I have to set the end to 0.5 - 0.33? Also, I'm struggling to use my own path for the line, but when I replace the current path with it, the van does not follow it anymore. I don't quiet know why:/ <path id="line" d="M0,251.32C59.82,242,144.24,236.61,205,247c24,4.11,51.08,16.94,93.28,17.46,51.08.62,85.58-13.89,110.91-21.77,46.78-14.55,71.87-9.48,225,4.42,154.49,14,231.73,21,263.29,20.4,157.16-3.08,161.25-38.87,254.58-20.52,107,21,131.36,73.93,210.74,60.61,63.78-10.7,66.12-50.36,142.89-69.32,65.67-16.23,129.58.42,193.86,8.47,92.31,11.57,189.23,6,280.72-8.29,292.41-45.49,315.9,15,621.94-1.28,293.86-15.63,282.72-46.8,401-24.71,151.74,28.35,230.58,91,380.35,64,56.7-10.22,79.74-21.4,168-37.43,69.39-12.61,149.91-9.39,220.58-9.3,52.95.07,131.22-1.76,227.87-4.31" style="fill:none;stroke:blue;stroke-linecap:round;stroke-width:10px" />
  9. Hi there, I'm trying to build a seamless animation where my van image is centered in the middle with its light, and it is following the line. The white dot at the left is from another codepen: https://codepen.io/lisaschumann/pen/KKqMMoe which I used as a starting point. That point follows the path perfectly, but whenever I try to make my van follow the path in the middle it still takes the path position (-33%) Also, when I try to add my own path, it destroys the animation even more. I would like to use this as my own path <path id="line" d="M0,251.32C59.82,242,144.24,236.61,205,247c24,4.11,51.08,16.94,93.28,17.46,51.08.62,85.58-13.89,110.91-21.77,46.78-14.55,71.87-9.48,225,4.42,154.49,14,231.73,21,263.29,20.4,157.16-3.08,161.25-38.87,254.58-20.52,107,21,131.36,73.93,210.74,60.61,63.78-10.7,66.12-50.36,142.89-69.32,65.67-16.23,129.58.42,193.86,8.47,92.31,11.57,189.23,6,280.72-8.29,292.41-45.49,315.9,15,621.94-1.28,293.86-15.63,282.72-46.8,401-24.71,151.74,28.35,230.58,91,380.35,64,56.7-10.22,79.74-21.4,168-37.43,69.39-12.61,149.91-9.39,220.58-9.3,52.95.07,131.22-1.76,227.87-4.31" style="fill:none;stroke:blue;stroke-linecap:round;stroke-width:10px" /> Any help is massivly appriciated!
×