Jump to content
GreenSock

Search the Community

Showing results for tags 'laggy'.

  • 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...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 5 results

  1. Hi there! So I'm creating a website with some basic text animations (to note, ScrollSmoother is also being used) and I've had some people comment that some pages are a bit laggy. I've assumed that's because most text has the animation in question applied, and their browser is struggling to keep up. So I've tried to implement an alternative that instead of using GSAP to animate these simple values, I'd do it with CSS and the toggleClass parameter for the ScrollTrigger. While I've got this mostly working, I am A. unsure how performant the alternative is going to be, and B. it doesn't work the way I'd particularly like it to. For example, the currently un-commented option in the CodePen uses the stagger parameter to add a slight delay to the children of the trigger. But the key factor is that the parent element is the trigger and all immediate children will animate sequentially. The CSS alternative, doesn't do this as each individual child is the trigger, in order to create the staggered effect. This however means that there are some points where the first element will animate in (e.g. the title, in my example) and there will be a blank space below (where the paragraph is, but hasn't animated in). Example below. This As opposed to I hope this makes sense. If anyone has any ideas or solutions as to what I could do to maintain the initial animation (GSAP) but without incurring any lag on different machines/devices that would be much appreciated! Thanks, Ben Elwood
  2. Hi guys, I'm having a problem with a Draggable plugin, or maybe it is my code error. Anyhow, the dragging animation works perfectly on desktop/laptop devices, but when you test it on the mobile device and try to move around fast by diagonal up and down, you can notice that some images are laggy. I tried everything I knew it might help, but it always gets me on mobile devices. Surely, someone of you guys maybe had some similar problem, or can give me the direction on how I can optimize this animation. Thanks in advance!
  3. Hi Devs, I don't know what's wrong in my code , the animations are super slow in firefox and sometimes in chrome as well. I have two issues Translating animations are super slow in firefox and sometimes in chrome Text animations are flickering on scroll I use SVG as react components Can u guys please help me improve my code. Im using NextJs and GSAP3. Thanks. let timeline = gsap.timeline({ delay: tableAndAbove ? 0.5 : 0, scrollTrigger: !tableAndAbove && { trigger: "#sellersLandingMobileContainer", start: "30% 20%%", }, }); if (tableAndAbove) { timeline.from("#sellersLandingMobile", { duration: 1, scale: 0.8, autoAlpha: 0, rotation: 0.01, }); timeline.from( "#sellersLandingMobile", { duration: 1, translateX: "20%", ease: "expo.out", rotation: 0.01, }, "-=0.6" ); } timeline.to( "#sellersLandingHeroText .hide-text", { duration: 0.8, ease: "expo.out", translateY: 0, delay: 0, autoAlpha: 1, rotation: 0.01, }, "-=0.9" ); timeline.from( "#sellersLandingCTA", { duration: 0.5, ease: "expo.out", scale: 0.5, autoAlpha: 0, rotation: 0.01, }, "-=0.5" ); document.querySelectorAll("#sellersLandingStoreLink").forEach((el) => { timeline.from( el, { duration: 0.5, ease: "expo.out", translateY: 20, autoAlpha: 0, rotation: 0.01, }, "-=0.3" ); }); const images = [ "#sell24By7Img", "#chatBroadcastInvoiceImg", "#lightningfastpaymentsImg", ]; const sections = [ "#sell24By7TextContainer", "#chatBroadcastInvoiceTextContainer", "#lightningfastpaymentsTextContainer", ]; useScroll(); useEffect(() => { gsap.to("#punchGrowthHeading .hide-text", { scrollTrigger: { trigger: "#punchGrowthHeading", start: "top 80%", }, duration: 1, ease: "expo.out", translateY: 0, rotation: 0.01, }); images.forEach((el, index) => { gsap.from(el, { scrollTrigger: { trigger: el, start: "30% 80%", }, duration: 1, ease: "expo.out", autoAlpha: 0, transform: `translate3d(${index === 1 ? 100 : -100}px, 0, 0)`, perspective: 1000, rotation: 0.01, force3D: true, }); }); sections.forEach((el) => { gsap.to(`${el} .hide-text`, { scrollTrigger: { trigger: el, start: "30% 80%", }, duration: 1, ease: "expo.out", translateY: 0, rotation: 0.01, }); gsap.from(`${el} p`, { scrollTrigger: { trigger: `${el} p`, start: "30% 80%", }, duration: 1, ease: "expo.out", autoAlpha: 0, }); });
  4. Hello there, after wasted hours of google searching, i will try to find help here: I just started with GSAP and i absolutely love it. But there are two problems which only appear on firefox: I'll post this link as well, because i dont think it's clearly visible in codepen: http://markmaurer.de/tween/ Problem 1: The animation is REALLY laggy and unsmooth in FF. It looks weird... Problem 2 (not visible on codepen): Text rendering, aliasing, smoothing or whatever changes after the animation is finished. Looks also weird? Everything works smooth on this page: http://www.riiotlabs.com/... So it should be possible to do smooth animations on FF. I've tried almost everything i could find in google but nothing worked. What am i doing wrong? Thank's a lot in advance for any help! Kind regards Mark
  5. I am playing with a desktop AIR app. I developed it on Windows and has a feature: Click the button, some panel hides. I use TweenLite's .to function to hide that panel (just a Sprite with about 20-30 children inside) Renders very smooth on Windows but on Mac, it's very laggy. Is there any tips to share so that I know where to fix it? Thanks!
×