Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by purple-lightsaber

  1. @Cassie thank you so much for this, exactly what I was looking for!
  2. I'd like to copy this site's hero, the video expands but I'd also like it to scale down in size right after. https://www.basedesign.com/ I've got the GSAP code working for the scaling up, but how do you add the scale down scroll trigger after the first one is complete? $(".sticky-circle_wrap").each(function (index) { let triggerElement = $(this); let targetElement = $(".sticky-circle_element"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "top top", end: "bottom bottom", scrub: 1 } }); tl.fromTo( targetElement, { scale: 0.35, opacity: 0.40, }, { scale: 0.75, opacity: 1, duration: 1 } ); });
  3. Willing to pay an experienced GSAP'er for this. I explain the task at hand here: The slide up animation I'm looking for is done here: https://codepen.io/GreenSock/pen/vYgqpdQ But more than willing to explain over a zoom call. Thanks!
  4. I've got 3 sections of copy separated by two bullet points. I'd like the first section to slide up on page load, then I'd like the second section (in between both bullets) to appear when all 5 of its sentences are in the viewport. Only problem is that its first and last line (lines with bullet points) are sharing lines with the first and last section. Is it possible to slide up only the copy which is within these bullet points, instead of the entire line sliding up which is what is happening now. Just to clarify when the line "aute irure dolor. ⬤ sequi nesciunt. Neque porro quisquam" scrolls into viewport I'd everything in green to slide up but not the part in red. Lorem ipsum dolor sit amet, consectetur adipiscing - the blue text slides into place on page load incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation magni dolores eos qui. ⬤ Quis autem vel eum iure Neque porro quisquam est, qui dolorem ipsum quia dolor reprehenderit qui in ea voluptate velit esse quam nihil ullamco laboris nisi ut aliquip ex ea commodo consequat aute irure dolor. ⬤ sequi nesciunt. Neque porro quisquam - the green text slides into place when this line scrolls into viewport et quasi architecto beatae vitae dicta sunt explicabo accusantium doloremque laudantium, totam rem aperiam Feedback is appreciated - the red text slides into place when this line scrolls into viewport
  5. @elegantseagulls thanks for pointing me in the right direction
  6. I've managed to do this animation on a webflow website: https://mm-detailing.webflow.io/ If you can see the hero text moves up while you scroll down. How can I achieve this with GSAP? I should also note that when scrolling back up the hero text moves back to its original position Thank you for any feedback!
  7. Exactly what I'm looking for, thank you @mikel Looks like I'll be buying a membership, seems like a great community.
  8. Hi all! Just getting into GSAP and would appreciate some help. example (blue logo in the middle revealing on load) http://riccardozanutta.com/ How can I achieve that same effect using GSAP? Thanks for any input!