Jump to content

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


  • Posts

  • Joined

  • Last visited

About sam_tween_journeyer

sam_tween_journeyer's Achievements

  1. Brilliant, thanks so much Blake. Phew... done
  2. Ah OK, well I added the import via the panel using the sandbox .js from: https://codepen.io/GreenSock/full/JjPwRob Still not seeing amazing fluttering text... My apologies for the simplistic errors.
  3. Ah id, my mistake, did it last night, last thing. I've loaded the libraries under the html panel, like I do for offline. Is this not functional? I've not seen it done my way before on codepen but Google doesn't reveal a better way....
  4. I know this is my bug, I'm trying to mash together a couple of Greensock's samples. I don't fully comprehend TimeLines. I want the text to all come whirring in. I've tried various things, this may well be my worst attempt.
  5. I have these two animations, a box rotating and contact buttons popping onto the screen. ScrollTrigger.create({ trigger: "#topLetterTrigger", animation: gsap.fromTo("#topLetter", {rotateY: -180}, {duration: 2.2, rotateY: 0, ease: "back.out(1.7)"}), once: true }); gsap.set(".contact-icon", {scale: 0}); ScrollTrigger.batch(".contact-icon", { trigger: "#topLetterTrigger", interval: 3, batchMax: 4, once: true, onEnter: batch => gsap.to(batch, {delay: 0.5, duration: 0.8, scale: 1, stagger: {each: 0.25, grid: [1, 4]}, overwrite: true, ease: "back.out(1.7)"}).delay(1.4), }); The delay on the batch animation is supposed to make the animations end at roughly the same time. However it doesn't, it seems sometimes the second trigger doesn't fire, or it starts the second animation when the first animation has completed, so instead of completing together the second animation commences at the end of the 1st animation + 1.4 second delay. Note: is there an issue where you shouldn't have 2 animations given the same trigger: value? I think using a timeline and the ScrollTrigger-ing them both will make it more robust. Or there is some other better way?
  6. I want the Dragon gif to move from the right to the left of the screen along the wiggly SVG line. The SVG line should stretch to full width. I've tried adapting a GSAP tutorial but the gif is stuck to the left of the line, not the right, it needs to ALWAYS start off page really, on the right, and swoop across and away. Tweaking the original SVG line got it to jerk across, I'd prefer a motion which completes the screen traverse by the time the user scrolls a screen height. All thoughts appreciated on how to improve. Finally when you take a tutorial from codepen it has ALL the gsap .js files appended, how do you know which ones you need for a certain page?