Jump to content
Search Community

Search the Community

Showing results for tags 'best practices'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Found 5 results

  1. Hello everyone! To start off I'd like to say that I'm very new to GSAP, came from using Framer Motion and fell in love instantly, I'm having a blast using it. I've been mostly creating animated UI components like menus, buttons, search bars etc that morph into different states, changing size, opacity etc. One thing I like to do is to set up unique animations for each state change. For example: I have button, a timeline that triggers when I hover on it, and another timeline that triggers when the mouse leaves the component. Slightly different easing and duration, same for opening and closing menus. One problem I have though, is if I rapidly trigger the animations, for example opening and closing a menu with keyboard shortcuts quickly and repeatedly , or moving the mouse quickly and continuously over the hover element, my animations tend to bug out for some reason. In the case of the hover animation, lets say even though the cursor ultimately left the element, it is stuck at the hover state. Hope my explanation makes sense. I tried multiple things, like .kill the opening timeline with the closing timeline and vice versa, in React I tried adding a state variable and trigger the timeline conditionally only if we're in the correct state but nothing seems to have solved it. My guess is somehow I queue up too many animations and since the timelines are never the same length, once the short one resolves we still see the end of the longer one? I'm sure this is something very basic and apologies if this have been discussed a million times before, but I would really appreciate any sort of insight, best practices or solutions when working with multiple timelines on the same component. Thank you very much!
  2. Hey guys, I am happy to be here and use your amazing tools for my upcoming personal website. That being said, I need your advice. What would you say would be best practices when dealing with multiple reveal animations on scrolling? I've found that mobile performance (on Chrome, since Firefox seems to perform beautifully) is pretty bad when it comes to the way my reveal animations trigger. They feel stuttery and somewhat low-fps. I've tried slowly scrolling to avoid overriding them by dragging the screen (to see if multiple animations firing at once could be the cause), but the choppy animation effect is pretty much the same even if only one animation triggers. For reference, I've set up my reveal animations using attributes. I place certain attributes on certain elements, and a switch statement detects the type of animation that needs to be fired for each element. Here's more or less how this code is setup. Maybe you have some pointers on how would be best to setup something like this? function loadGSAPAnimations() { let selector = "[data-reveal]"; // Base selector for elements to animate // Query the DOM once for each modified selector let itemsToAnimate = document.querySelectorAll(selector); itemsToAnimate.forEach((itemFound) => { const elementTimeline = gsap.timeline({ delay: itemFound.dataset.delay || 0, // If "data-delay" attribute is present, adjust value defaults: { duration: 1, ease: "power4.out" }, }), animationType = itemFound.dataset.reveal; switch (animationType) { case "multi-element-reveal": const childElements = itemFound.querySelectorAll(childSelector); gsap.set(childElements, { opacity: 0, y: 115, willChange: "transform, translateY", }); elementTimeline.to( childElements, { opacity: 1, y: 0, stagger: 0.2, ease: "power4.out", onComplete: () => { gsap.set(childElements, { willChange: "auto" }); }, }, "+=0.3" ); break; case "element-reveal": gsap.set(itemFound, { opacity: 0, y: 115, willChange: "transform, translateY", }); elementTimeline.to( itemFound, { opacity: 1, y: 0, duration: 1, ease: "power4.out", stagger: 0.15, onComplete: () => { gsap.set(itemFound, { willChange: "auto" }); }, }, "+=0.3" ); break; case "title-reveal": let elementText = new SplitType(itemFound, { types: "lines", lineClass: "title-line", tagName: "span", }); gsap.set(elementText.lines, { opacity: 0, y: 115, willChange: "transform, translateY", }); elementTimeline.to( elementText.lines, { opacity: 1, y: 0, duration: 1, stagger: 0.15, ease: "power4.out", onComplete: () => { gsap.set(elementText.lines, { willChange: "auto" }); elementText.revert(); }, }, "+=0.3" ); break; case "image-reveal": const image = itemFound.querySelector("img"); const innerWrapper = image.closest(".image-animation-wrapper"); gsap.set(innerWrapper, { scale: 1.15, "--reveal-scale": 1, force3D: true, willChange: "scale, transform, translateY", }); elementTimeline.to( innerWrapper, { "--reveal-scale": 0, scale: 1, duration: 1.5, ease: "power4.out", onComplete: () => { gsap.set(innerWrapper, { willChange: "auto" }); }, }, "+=0.3" ); break; } //Controls the distance from the screen when the item gets revealed on scroll const revealOffset = itemFound.dataset.offset || 84; // Create the ScrollTrigger instance ScrollTrigger.create({ trigger: itemFound, animation: elementTimeline, start: `top ${revealOffset}%`, end: "bottom 35%", refreshPriority: -1, }); }); }
  3. Hello GSAP Community, as a freelance-based Webflow web designer and developer. I'm looking to enhance my Webflow projects with GSAP animations and have several queries, especially regarding the use of my GSAP Premium membership and its implementation in live projects. As I understand, GSAP Club Files are not supposed to be hosted publicly. How can I best achive hosting these files so that only accesses from my clients' domains are possible? Is there a method to limit access to the GSAP files so that only requests from specific client domains are allowed, ensuring both security and cost-efficiency? I would greatly appreciate any general recommendations and best practices for integrating GSAP into Webflow projects in a freelance setting. Any tips or shared experiences are welcome.
  4. GSAP noob over here... and loving it so much! I was just wondering if anyone has established beautify setups to share? I've grown accustomed to using the order of CSS properties I stole from Bootstrap and the OCD in me is itching for something similar in GSAP. eg for CSS order of properties: 1) Positons (absolute, top, left, z-index etc) 2) Box-model (block, padding, margin, etc) 3) Layout (flex & grid type of stuff) And so on... It's worth noting for CSS I just used a feature in PHPStorm that allows you to create a list of the order you want. So I'm not sure if the same will be possible with GSAP. I guess I'm just asking out of interest for the most part.
  5. flysi3000

    What's the deal with Gzip?

    So, can I deliver banner files gzipped? I have an ad that we converted with Swiffy; it looks amazing, and right there, in the Swiffy output window, it shows the file size of the banner as 88k -- but it's the gzipped file size. The raw file size of the html when I download it, is 346k. I'm pretty sure I can use gzipped files in Doubleclick, but what about other media people/publishers? Anyone have experience with this?
×
×
  • Create New...