Jump to content
Search Community

sam_tween_journeyer

Members

  • Posts

    13

  • Joined

  • Last visited

sam_tween_journeyer's Achievements

  • One Year In
  • Dedicated Rare
  • Collaborator Rare
  • First Post Rare
  • Conversation Starter Rare

Recent Badges

5

Reputation

  1. sam_tween_journeyer
    From the docs^ I need to set a width & height attribute. Does this apply to svgs with a defined viewbox? I've made the viewbox dimensions explicit by setting width="xx" height="xy" on the svg: viewBox="0 0 576 512" width="576" height="512" I'm not sure if it's something else, but there's a stagger in a preceding animation as the svg animation kicks in and begins to animate concurrently. Given the viewbox dimensions are HUGE, then the svg is resized down by a css class to height: 64px; width: auto, I wonder if setting the width and height is causing excess rendering somehow. I'm trying to eliminate flakiness in animation loading (not loading at all), so I'm working through the steps in the docs. Please advise.
  2. sam_tween_journeyer
    Brilliant, all solved! Cheers, x Sam
  3. sam_tween_journeyer
    I've fiddled with this for a while, to the point of dumbness, I'm now redesignated 'grouchTrigger' from an id to a class to see if I can get my desired behaviour. So far as I can tell the ScrollTrigger isn't triggering, the animation just plays immediately, possibly after the Triggers delay. What's the correct way of achieving this? Thanks Sam
  4. sam_tween_journeyer
    Cheers, implemented, moved script tags to head. I experimented with <link rel="preload" href="used-later.js" as="script"> As described here https://developers.google.com/web/updates/2016/03/link-rel-preload But found it didn't work in Chrome, only loading via Script tags worked. So great! Optimisation optimised! Thanks Blake. Happy New Year x Sam
  5. sam_tween_journeyer
    Cheers Blake for the link. I'm hesitant to use async at all because I fear the gsap libraries may not be ready in time for the animation in the script tags. They're losing concurrently to the html parsing I believe. Am I misunderstanding how this works? Every situation is different, well... my scenario of wanting to prioritise a hero animation and not caring so much about later animations, must be very common.
  6. sam_tween_journeyer
    Top of my <body> tag I have a hero image, which on mobile is guaranteed to fill 100vh, the full screen. I want to guarantee the animation loads before the user scrolls down whilst maximising UX. To accomplish this I presently load the HERO background texture jpg first. I compressed the jpg from 52.1kb to 29.1kb, with some disappointing loss of grainess. To accelerate its loading I then converted it to base64 and embedded it inline in the html. This ballooned the html file size by 40kb to a total of 139kb - YIKES! This means overall the user is downloading an extra 10kb, than if I kept the image as an external file. But I can guarantee its loaded for the animation beginning. I then load this <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src='../javascript/SplitText.min.js'></script> <script> animation blah </script> Then I continue with the page's html. It's a long page, there's a lot of it. And more javascript in <script> tags at the bottom of the page to manage accordions and other animations not immediately required. Is this optimum? I presume those downloads block the page loading further. Is there a way to load those 2 gsap libraries async in the html header, and only have the <script>animation blah</script> execute once they've loaded? What javascript would I use to detect that? Am I making the right decisions for maximum performance?
  7. sam_tween_journeyer
    Brilliant, thanks so much Blake. Phew... done
  8. sam_tween_journeyer
    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.
  9. sam_tween_journeyer
    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....
  10. sam_tween_journeyer
    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.
  11. sam_tween_journeyer
    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?
  12. sam_tween_journeyer
  13. sam_tween_journeyer
    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?
×
×
  • Create New...