Search the Community
Showing results for tags 'performance'.
-
On a Squarepage site I'm building there are multiple Lotties that animate on scroll, snapping between a few point in the animation. I've had these up for the last month or so and they super smooth, but since yesterday they are very choppy (see video) as they move from one snap point to the next. I've posted a question with Squarespace to see if anything changed on their end that can account for this.. Do you have any thoughts on what might cause this behavior? <script> LottieScrollTrigger({ target: "#block-yui_3_17_2_1_1730794167201_2234", path: "https://raw.githubusercontent.com/michielknop/Lotties/refs/heads/main/Evolution.json", speed: "slow", scrub: 1 // seconds it takes for the playhead to "catch up" // you can also add ANY ScrollTrigger values here too, like trigger, start, end, onEnter, onLeave, onUpdate, etc. See https://greensock.com/docs/v3/Plugins/ScrollTrigger // you can pass in a "timeline" that has existing animations in it, and LottieScrollTrigger will play that alongside the Lottie animation // you can pass a startFrameOffset and/or endFrameOffset to cause the playhead to start/end at a different frame. }); function LottieScrollTrigger(vars) { let playhead = { frame: vars.startFrameOffset || 0 }, target = gsap.utils.toArray(vars.target)[0], speeds = { slow: "+=2000", medium: "+=1000", fast: "+=500" }, st = { trigger: target, pin: true, start: "center center", snap: [0, 0.316, 0.421, 0.526, 0.632, 0.737, 0.895, 1], end: speeds[vars.speed] || "+=1000", scrub: 1 }, ctx = gsap.context && gsap.context(), animation = lottie.loadAnimation({ container: target, renderer: vars.renderer || "svg", loop: false, autoplay: false, path: vars.path, rendererSettings: vars.rendererSettings || { preserveAspectRatio: "xMidYMid slice" } }), frameAnimation; for (let p in vars) { // let users override the ScrollTrigger defaults st[p] = vars[p]; } frameAnimation = vars.timeline || gsap.timeline({ scrollTrigger: st }); if (vars.timeline && !vars.timeline.vars.scrollTrigger) { // if the user passed in a timeline that didn't have a ScrollTrigger attached, create one. st.animation = frameAnimation; ScrollTrigger.create(st); } animation.addEventListener("DOMLoaded", function () { let createTween = function () { animation.goToAndStop(playhead.frame, true); frameAnimation.to(playhead, { frame: animation.totalFrames - 1 - (vars.endFrameOffset || 0), ease: "none", duration: frameAnimation.duration() || 1, onUpdate: () => { animation.goToAndStop(playhead.frame, true); } }, 0); return () => animation.destroy && animation.destroy(); }; ctx && ctx.add ? ctx.add(createTween) : createTween(); // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes ScrollTrigger.sort(); ScrollTrigger.refresh(); }); animation.frameAnimation = frameAnimation; return animation; } </script> Performance-issue.mp4
-
Hello everyone, I've discovered that our website, https://www.shotblastingmachines.in/, isn’t loading as it should when Hardware Acceleration is disabled in the latest Chrome version (114). Does anyone have tips or suggestions on how to improve the scrolling and loading performance with Hardware Acceleration turned off? It would be great if you could check out our site with acceleration off and share any ideas you have. At Ambica Enterprises, we’ve also noticed that videos fail to load when acceleration is off, but work fine when it’s on. Thanks & Regards! Ambica Singh.
-
I am developing a game using - react 18 - latest gsap - styled components At some point I create a bunch of draggables by doing Draggable.create('.token-card-view', { type: 'x,y', bounds: '#action-menu-view', edgeResistance: 0.65, dragResistance: 0.1, activeCursor: 'grabbing', onDragStart: function () { ... }, onDrag: function () { ... }, onDragEnd: function () { ... }, }) ); There are right now exactly 7 elements with token-card-view class. When profiling I have the following functions taking way too much time I am unable right now to re-create a pen that extracts the piece of my application causing this. Things I can think of - our styles do using cqmin - out styles do using some calc Still, it does not seem too heavy to cause this. Any insight ? recommendation ?
-
Hi guys, I'm new to GSAP and i started using it with my PIXI slot machine project for my uni. I have problems with performance on mobile devices but on desktop everything is fine. When i open my application on mobile device, FPS is usually 60, but as soon as i start spinning the slot reels, frame rate drops drastically to almost 27 FPS and animation is quite buggy until it reaches the last slot machine reel then the animation looks normal as it should. All sprites are between 50kb and 150kb, loaded in cache with pixi, and in general it does not use a lot of memory, its pretty lightweight. I set in my pixi app antialias to false. I registered PixiPlugin and rest in example: gsap.registerPlugin(PixiPlugin) import gsap from "gsap"; PixiPlugin.registerPIXI(app) app.ticker.stop(); gsap.ticker.add((delta) => { app.ticker.update(); stats.end(); }); i am using tweens gsap.to(); for my animations. I know that in pixijs when you want to ensure that object is moving at the same speed on low FPS you are updating its position using the delta time in pixi ticker functions, but i dont know how it works in GSAP. This is the example code of spinning animation. gsap.to(reel, { id: "bounce-start", duration: 0.2, ease: "none", pixi: { y: bounceStartTo, }, onComplete: () => { // x is time that waits for the first reel to stop const x = 0.5; // y is actually the speed of the next reel stop iteration const y = 0.75; let duration = x * (this.reelIndex + 1) * y gsap.to(reel, { id: "spin" + this.reelIndex, duration: duration, // y: fin, pixi: { y: fin }, repeat: -1, ease: "linear", onComplete: () => { gsap.fromTo(reel, { y: bounceEndTo }, { id: "bounce-end", duration: 0.2, pixi: { y: fin }, ease: "linear", onComplete: () => { onCompleteFn() } }, ) } }); } } ) Guys i dont know how to solve this, please helpp:((
-
I've been working on a website for a customer, but I probably made the poor choiche of deciding to animate an svg for the hero section where i animated the position of 2 ellipse with a blur effect. The performance are great on desktop but on mobile it barely even works causing lots of lags. https://dreamteamdesign.majestico.it I'm talking about the animation that start from the circle mask to the end of the animated gradient. What would be the ideal way to animate this? Should I animate using canvas? Do you know if there's an example of something similar? Thanks
-
When use chrome or edge the first few clicks have a super lag during the scaling of images (after DOM loading asset) using GSAP library. With firefox it doesn't happen, although I read around that the opposite often happens but I would rather do it in chrome to export it with electron. The image is very heavy but the use is thought to be in a local machine (no internet) and I need a high resolution 1. Is there any way to preload the GSAP animation avoiding this terrible initial snap? 2. Why on firefox does it not do this? Is it a browser or library problem? 3. With css it doesn't do it however I lose the control of positions Am i wrong with something? Can you help me with some suggestions? Thanks Here the demo https://animdrops.xyz/static/02-magnifier/ Here a basic example with the same problem: https://codepen.io/matt8629/pen/OJdJbXr
- 2 replies
-
- animation scale
- preload animations
-
(and 1 more)
Tagged with:
-
Hello Greensock team, My first question here in the forum. Congrats on the new branding and the website. It looks awesome I recently created an infinite marquee/gallery effect. What I needed to add is that it should also react to scroll. Creating gallery that moves to right as a repeat tween and wrapper to move left and right based on scroll was also doable with ScrollTrigger. But I need it to move extra only to left no matter I scroll down or up. I've read related questions here on the forum and put together something. They were quite helpful. It works. I just want help to see if this is the right way to do this, syntax and performance wise. I'd be extremely grateful. Minimal Codepen Demo - https://codepen.io/deepak-gangwar/pen/mdaZqXM
- 1 reply
-
- scrolltriger
- marquee
-
(and 2 more)
Tagged with:
-
Hi All.. I am new to GSAP and investigating whether GSAP is the right tool/platform for a PoC I am building (vs. using Anime.js, Pixi.js, D3.js, other). Here is the use case: Initialize a rectangular canvas with a variable but large number of tweens (i.e. 30,000). All of the tweens begin on the left edge of the canvas and are distributed vertically from top to bottom, evenly. GSAP will animate the tweens along a fixed path from the left edge of the canvas to the right edge. The path contains multiple fixed segments (i.e. 9 segments) that each of the tweens will follow. Each of the tweens will have different durations for each of those segments before finishing at the right edge of the canvas. The tweens can certainly be very small and the canvas can grow tall enough to accommodate all of the 30K tweens (top to bottom) You can assuming the data for each tween is available (can be all hardcoded for now but will eventually be retrieved via Web Service API) I created the following codepen (http://codepen.io/angecles/pen/apopOm) which shows the concept in action with just 10 tweens. Any support from this group would be appreciated!
- 8 replies
-
- scaling
- performance
-
(and 1 more)
Tagged with:
-
Hey Guys, I have implemented the new landing page for our website with GSAP & ScrollTrigger. It contains bunch of animations, including CSS and Image Sequence render on scroll etc. I want someone to audit the performance and suggest us/work with us for necessary changes to get the fluid performance of the animations. The issue is mostly in some animation timeline with more than 2 scene including a clip path change. Latest link to the page- https://website-production-ezzhdy36l-ultrahuman.vercel.app/v2/
-
- 1
-
- performance
- animation
-
(and 2 more)
Tagged with:
-
Hello! I wanted to know in terms of performance if there's any difference between using multiple useRef to select the elements of a react component and using the new feature gsap.context. Second if it's posibble I'd like to know what is it going on in the shadows, how is that the library makes sure that the strings I pass which are inside the parent ref are getting targeted. Is there somewhere I could read about it?
-
I need to create an infinite horizontal full-width slide animation. I have a general question regarding performance. I know that the "white listed" high performance properties like transform, opacity should always be preferred. But I didn't find any information on the performance of animating backgroundPosition. Good idea or bad idea? Especially if the element is pretty huge (e.g. 2560x400px). Not sure if that makes a difference in context of backgroundPosition... Thanks in advance!
-
hi, i got a few animations linked to a scrolltrigger, which work absolutely fine with every browser. but in safari if the screen is over a certain width the animations sometimes start to flick or just lag. i already tried to just animate them automatically (without scrolltrigger), but it seems like not the scrolltrigger is the problem. i think that svg's require more performance in safari or something like that? so the question is how can i fix my animations, for safari? it also seems like the animation works fine unless u got a 4k or higher screen. thanks in advance!
- 11 replies
-
- 1
-
- scrolltrigger
- performance
-
(and 2 more)
Tagged with:
-
Hi, Is there a special / approved way of measuring animation performance on the client? I would like to measure if the animation has lagged vs specified duration, or if greensock was being clever under the hood and skipped frames to optimise the animation. Currently I'm using a onComplete call within gsap.to to print the end of animation time, and comparing that to a time from just before the animation was called. This way I'd be able to turn off animation effects automatically across the site based on some initial test, for slower performance devices. One extreme edge case was when I opened a web app in a virtualised macOS machine that did not have GPU passthrough, so simple transform animations would freeze the entire machine. Would avoid having these problems by running a small transform animation test for a few ms duration to see how it performed, then decide on the animations for rest of site. EDIT: The timestamping method doesn't work well for performance measurement - testing shows the elapsed ms from before gsap.to() to onComplete call could be less than the duration specified in gsap.to(). EDIT2: For anyone having the same experiment with a virtualised machine for dev environment, the guest OS / Safari doesn't freeze or drop frames as per the fps measuring function given by Jack below. It's likely about how VMware renders the graphical output of the guest OS back to you on the host OS that freezes / drop frames.
- 10 replies
-
Hi there ! I have a horizontal scroll in place with Scrolltrigger. I was wondering if it was possible to disable animating elements when they're out of the viewport for performance matter ? Juste like Locomotive scroll : https://locomotivemtl.github.io/locomotive-scroll/ Thanks for your feedback
-
Hi ladies and gents. Hoping someone can help me out with the performance of this animation in Safari. I built a site for a friend and it works fine on Chrome, Firefox and Edge but on Safari it flashes towards the end of one of the animations in the timeline. I have no idea why. If anyone could give me some advice on how to fix this and any other tips to improve the performance, i'd really appreciate it ? https://theswirlytrain.com Here is a video example of what is happening. // start animation at top of page function scrollTop() { if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; } window.scrollTo(0,0); } const tl = gsap.timeline({ defaults: { ease: 'power3.out' }, onStart: scrollTop }); tl.set('article', {autoAlpha: 1}); tl.from('.home .artwork .elementor-widget-container', 3, { scale: 8, autoAlpha: 0, delay: 0.3}); tl.from('.home .elementor-button, .signup-form, .release-details', 1, {autoAlpha: 0, y: 40, stagger: 0.4, delay: -1}); tl.from('header', 1, {autoAlpha: 0, delay:-0.5}); tl.from('.moving-text', 3, {autoAlpha: 0, scale:1.2, x: 100, delay:-0.5});
-
Maybe someone can help me out. I have performance problems loading an GSAP animation. The animation is this: Add SVG to div, and the SVG will follow a data path in SVG d: coordinates. It works fine on desktop, and only sometimes on Ipad / Iphone. The problem is that the SVG is moving very slowly, like the data path is still being loaded. I tracked the fps, which topped around 100 for Ipad. How to experience the problem: Click on the down arrow to go below water surface. Then click on the whale icon. The whale SVG should appear from left to right, and follow a data path for 20 seconds. If the whale moves smoothly, then all is good. But if the whale is moving very slowly, and in staggering movements, then the error must be performance problems ?
- 1 reply
-
- pathdatatobezier
- ipad
-
(and 1 more)
Tagged with:
-
Hello there! I'm a bit newbie in a GSAP animation exactly. And I'll start with a simple example to understand my expectations. For example, if I'll create the element like this const elem = document.createElement("div"); it is not in DOM for now, but I can apply animation on it so far TweenMax.to(elem, 1, { x: 300 }); and it will start immediatly. So, when this element will be appended into DOM (after 1 sec passed), it will have its `transform: translateX(300px);` If this element appends while tweening we'll see it moving from some middle point. The very simple example is in CodePen applied. Is there a way to make some performance on elements, that are not in DOM for right now, i.e. hold the animation until the element appears on the screen? Some kind of holding animation request until appending or smth. similar. Hope, my explanation is well. Best regards, Nick Rimer UPD: I solved this case with a combination of `pause` property and `document.body.contains(elem)`. Saving animation first: const anim = TweenMax.to(elem, 1, { x: 300, paused: !document.body.contains(elem) }); Run animation when element will appear: anim.play(); But I don't know if this solution is awful/great/the best. Maybe you'll find the most efficient and elegant way. CodePen was updated. UPD2: Want to point out that the aim is to understand are there any performances on start of the animation I not needed to start right now? I really don't wanna to start even calculate something, if the animation starts not in time (there may be several animation at one time or smth. else). But to start animate, when the element appears. So I don't really understand will the solution with `paused: true` helps or not.
- 2 replies
-
- performance
- gsap
-
(and 1 more)
Tagged with:
-
Hello, I am pretty new to GSAP and so I may be doing something wrong, but I am having a performance issue with multiple back and forths animating three.js objects and then reversing them. As you can see on my project (linked below) when you click the three.js objects and then click the back button all the animations work fine. But the more you click them, the slower they start to become and the longer the reverse animation takes on the objects and on the text. Now I am not sure if I set it up wrong and its just an issue with my code, or whether its a performance issue. Can someone please see my GSAP code below and see if they can pin point what might be happening? Here is a link to my project: http://jacobtruax.info/ Code for the Tweening: const tl = new TimelineLite() const tlFNUP = new TimelineLite() const tlOld = new TimelineLite() const tlAlex = new TimelineLite() const tlCam = new TimelineLite() TweenMax.set(backTag,{autoAlpha:0}); TweenMax.set(footerTag, {autoAlpha:0}); TweenMax.set(moreTag, {autoAlpha:0}); function onDocumentMouseDown(event) { const intersections = raycaster.intersectObjects(objects) if (intersections.length > 0){ if(projectHov){ tl.play(); tl.add( TweenMax.to(footerTag, .5, {delay: 1, autoAlpha: 1,})); tl.to(backTag, 1, { delay: 1.25, autoAlpha:1, }, 0); tl.to(moreTag, 1, { delay: 1.35, autoAlpha: 1, }, 0); } if (intersections[0].object == old ) { if(projectHov){ tlOld.play(); projectHov = false tlOld.add(TweenMax.to(old, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0}, ease:Power2.easeInOut})); tlOld.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlOld.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlOld.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlOld.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0); groupRotate = false } } if (intersections[0].object == fnup) { if(projectHov){ tlFNUP.play(); projectHov = false tlFNUP.add(TweenMax.to(fnup, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0 }, ease:Power2.easeInOut})); tlFNUP.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlFNUP.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlFNUP.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); groupRotate = false tlFNUP.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0); } } if (intersections[0].object == cam) { if(projectHov){ tlCam.play(); projectHov = false tlCam.add(TweenMax.to(cam, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0}, ease:Power2.easeInOut})); tlCam.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlCam.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlCam.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); oldRotate = false groupRotate = false tlCam.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0); } } if (intersections[0].object == alex) { if(projectHov){ tlAlex.play(); projectHov = false tlAlex.add(TweenMax.to(alex, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0}, ease:Power2.easeInOut})); tlAlex.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlAlex.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); tlAlex.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0); oldRotate = false groupRotate = false tlAlex.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0); } } } backTag.addEventListener("click", function() { projectHov = true groupRotate = true tlOld.reverse(); tlAlex.reverse(); tlCam.reverse(); tlFNUP.reverse(); tl.reverse(); })
- 10 replies
-
- performance
- three.js
-
(and 1 more)
Tagged with:
-
Hi everyone, I wanted to reply this post -> http://greensock.com/css-performance But I don't know why I can't leave a message, even if I'm logged in... So I'll share my opinion here I'm working on a game webapp (HTML5/CSS/JS), running on desktop browsers, smartphone, tablet and also into a native IOS app (webview) built with Cordova. In this webapp, like in every games, there is of course transitions between pages, popup and dialog apparition, drag and drop functions, etc... there is also transitions/animations on elements such as div, svg, png from the DOM during the game. During my development process, I was looking for the best way to animate those elements to get the best visual effect during transitions, tween, bouncing effect, apparition effect, etc. I was focusing on this idea "the user should NOT see the difference between my webapp and a real native app". I wanted every transitions/animations look smooth and great. I know GSAP since 2010 so this was my first idea. GSAP is really the most convenient JS library that I know to animate. I have nothing to say on that point. But, during my test on different devices, I noticed that large transitions such as fade on the entire screen, dialog and popup bouncing, opacity apparition was laggy on smartphone and tablet (on desktop browser it was great). So I did some research and test. After reading lot of post about CSS vs JS I tried by myself to recode all those laggy transitions only with CSS rules. The result was surprising because those new transitions was great, no lag, very fluid, better than with GSAP. Then I found this article -> http://greensock.com/css-performance I tried the CodePen linked -> http://codepen.io/GreenSock/full/2a53bbbcd47df627f25ed1b74beb407d/ On my laptop I can't see any difference (I'm not talking about pure performance and FPS benchmark, I'm only talking about visual feeling, looking for something fluid, without lag). But did you try this CodePen on tablet and smartphone? The difference is huge. CSS transitions look really better, fluid without any lag during transition. I did test on iPad Pro, iPad Air, iPad 3, iPhone 5, iPhone 6... Each times I set the Quantity at 2000 and I can see a huge difference. CSS looks much better. Of course coding complex animation with pure CSS rules is awful, so if I could get the same result with GSAP I'll use it for sure. And you guys? Did you encountered the same issue with smartphone and tablet? Any opinion or comment are welcome! Thanks!
- 10 replies
-
- css
- performance
-
(and 2 more)
Tagged with:
-
Hi, I’m relatively new to GSAP and am loving the experience so far - great job all involved! I have a quick question about performance and best practice when making a few animations at the same time. I have one point in my web site process where I want to have a number of elements change state in sequence. I have added all of these to a timeline and it performs relatively well. When running it there is a slight performance hit, I’m guessing because I’m changing a good number of properties. When doing this, is it good practice to add all of the changes to a timeline, or run them as separate TweenMax.to statements? I’ve included my statement here although the related html is large and would be tough to include in codepen. Can anybody spot anything blatantly wrong than I’m doing, or suggest any improvements on what I have shared to help speed smooth this sequence out? For reference, ctlTopCurve and ctlModel are SVG controls, imgHeader is an image and the rest of the controls are Div’s. Thanks in advance for your help, Al. var tl = new TimelineLite(); $("#modelSwipeLayer").css('display', 'none'); $("#ctlTopCurve").css('display', 'block'); $("#ctlTopCurve").css('z-index', '1'); $("#ctlHeader").css('height', '40%'); $("#imgHeader").css('marginLeft', $(window).width()); $("#imgHeader").attr("src", "/Content/Images/hero-image-3.jpg"); $("#imgHeader").css('z-index', 0); $("#IndividualDashCompareDescriptionContainer").css('display', 'block'); $("#IndividualDashMeasureDescriptionContainer").css('display', 'block'); $("#imgHeader").css("opacity", 0); $("#imgHeader").css("marginLeft", 0); //Hide the existing controls tl.to("#ctlModelInstructionContainer", 1.5, { autoAlpha: 0 }, 0) .to("#btnShowIndividualDash", 1.5, { autoAlpha: 0 }, 0) .to("#ctlModelZoneContainer", 0.5, { autoAlpha: 0 }, 0) .to("#ctlModelNavGestureHintContainer", 0.5, { autoAlpha: 0 }, 0) //Move the model up .to("#ctlModel", 1.5, { top: '280', height: $(window).width() - 70 }, 0) .to("#modelGraphicContainer", 1.5, { strokeWidth: 2 }, 0) .to("#ctlModel", 1.5, { rotation: 45 }, 0) //Show the action buttons .to("#btnShare", 1, { y: '-=44px' }, 0) .to("#btnCompare", 1, { y: '-=89px' }, 0) .to("#btnMeasure", 1, { y: '-=89px' }, 0) //Show the dash text .to("#IndividualDashCompareDescriptionContainer", 0.6, { autoAlpha: 1, top: parseInt($("#IndividualDashCompareDescriptionContainer").css('top')) - 30, delay: 0 }, 1.5) .to("#IndividualDashMeasureDescriptionContainer", 0.6, { autoAlpha: 1, top: parseInt($("#IndividualDashMeasureDescriptionContainer").css('top')) - 30, delay: 0.4 }, 1.5) //Slide in the header image .to("#imgHeader", 3, { autoAlpha: 1 }, 1.5);
-
Hi Guys, I'm working on an animation that has the same structure as this pen. The effect I'm trying to achieve is Items flowing across the bottom right part of the screen at different speed. I've got 2 questions: 1) I can't understand why at the start of the animation the cats are sitting on the bottom of the container having given them a "top" of 100vh and they don't start from below that container. 2) I'm sure this is not a very performant way to animate this. Is there a better way to do it? Basically I don't care the order of the animations as long as they travel at 45degrees from bottom to the top right of the screen. Animations can occur randomly and they should be continuous. Hope that's clear, Thank you, Jp
-
hi guys, I created a checkout that slides in from the side of the page. It all makes sense if you go to https://www.shinbyeong.com/ scroll down a bit and click on 'pre-order' on the bottom. So the first time you open the slider it's a bit chucky, then after performing more times it get's better. I guess that's some cache right there. I added a will-change: transform; on the elements affected. But I didn't see any improvements. When I use chrome dev tools to record the performance I'm not sure how to analyse it. I don't see large chunks of delayed properties (in ms). My question: Can I pre-cache this animation somehow? What else can I do to improve it? Here is the code, quite simple is my guess: .viewport--locked adds overflow hidden on outer element. .animate-out transitions some transforms on translateX. Nothing special, except that I fire 2 with a delay and try to create a parallax like effect. const showModal = () => { viewport.classList.add('viewport--locked') TweenLite.to(viewportOverlay, .5, { opacity: 1, onComplete: () => { checkoutContainer.classList.add('animate-out') TweenLite.to(checkout, .5, { xPercent: -100, ease: Power4.easeOut }) } }) } const closeModal = () => { checkoutContainer.classList.remove('animate-out') TweenLite.to(checkout, .45, { xPercent: 100, ease: Power4.easeIn, onComplete: () => { TweenLite.to(viewportOverlay, .25, { opacity: 0, onComplete: () => viewport.classList.remove('viewport--locked') }) } }) } buyButton.addEventListener('click', () => showModal()) checkoutClose.addEventListener('click', () => closeModal())
-
Hi sorry if this has been asked already it's kind of a hard question to search for. I plan to have a pixi js scene of images for my website background where I'm often tweening images in and out of the scene, but in some scenarios tweening already offscreen images offscreen again so those tweens don't change any values. Do these unnecessary tweens affect performance? Is it better for performance to have conditional checks instead of 'no change in value' tweens? I don't think I will have performance issues either way but I wonder if gsap already has something built-in that automatically optimizes 'no change tweens' so that they don't have any affect on performance even if there are a large amount of them triggered all at the same time. Thanks.
-
Hi, I am working on a project for university. I am using some animations on my site and on my desktop machine they all work fine and are smooth. But on my smartphone that's a whole different story. TweenMax.to(document.querySelector('.logo'), 0.4, {opacity: '0', ease: easeF}); TweenMax.to(elem.querySelector('.project_bg'), 0.4, {height: '40%', ease: easeF}); TweenMax.to(elem.querySelector('.project_shade'), 0.4, {height: '40%', ease: easeF}); TweenMax.to(elem.querySelector('.project_text'), 0.4, {top: '20%', ease: easeF}); TweenMax.to(elem.querySelector('.project_desc'), 0.4, {opacity: '0', ease: easeF}); TweenMax.to(document.querySelector('.project_total'), 0.4, {opacity: '0', ease: easeF}); TweenMax.to(document.querySelector('.close_button'), 0.4, {opacity: '1', ease: easeF}); TweenMax.to(elem.querySelector('.content'), 0.4, {opacity: '1', height: 'auto', y: window.innerHeight * 0.3, ease: easeF}); These animations in particular are very slow and stuttering on mobile devices. I don't know if these animations can be optimized but if yes it would help me alot if someone can explain me how. My easing function looks like this: easeF = new Ease(BezierEasing(.37,.01,0,.98)); Do I have to reduce the amount of animations or do I have to use a timeline (which I didn't at all until now)? URL: https://sftp.hs-furtwangen.de/~lautensc/gis/ Cheers and best regards!
-
Hello, I'm trying to code a flickering animation, where a canvas and an image flicker on and off intermittently. I'm trying to get the timing of the flickering as accurate as possible: the canvas (multicoloured "mondrian" in the codepen) should be presented for 67 ms (4 frames at 60Hz) and the image ("stimulus" in the codepen) for 34ms (2 frames at 60Hz). I coded it using only autoalpha, drawing everything before the animation starts. The presentation times are recorded into an object called "vbl" in the codepen. On my macbook with chrome, animation works almost perfectly. But testing this animation on a few different setups (weaker windows machines, all chrome or firefox), I'm getting a considerable amount of mistiming: Especially in the first flickers in the sequence. Both the canvas and the image might be presented for too short or too long (0-100ms in range, though mean and median are close to wanted values). As timing is the most important issue for me, I am willing to use almost any trick to get it better. Any ideas? I'm fine with long (~0.7 second) loading times. Many thanks, Yaniv