Search the Community
Showing results for tags 'question'.
Found 14 results
-
I have a gsap.timeline() I'm using for animation in a Phaser game. I have events which I receive from a server and I timeline.to(sprite, { x: ..., y:... }) them to move them around. I also have some fake tweens like timeline.to({ duration: 0.5 }, {onComplete: () => {}}) Everything is working perfectly, until I set the {autoRemoveChildren: true} setting for the timeline. Then the movement animations don't play for the duration of the fake tweens. And afterward, any further timeline.to movements applied happen instantly (sprite just teleports to end location). I've linked a codepen where I try to reproduce the error, but I'm actually unable to. I'm going to keep winding back my program to something closer to the codepen to see what's wrong. But in the meantime, does anyone have any suggestions on beginning to debug this based on clues I've given? I've attached some videos... Screencast from 02-27-2024 11:06:08 PM.webm Screencast from 02-27-2024 11:05:33 PM.webm Screencast from 02-27-2024 11:29:28 PM.webm -
Hello, I would like to know if we can create a retro game using GSAP? Is it really possible for beginners to create their own basic game using GSAP? Even without physics in the game just to control the character only. Or even control a snake in the snake game. Anyone tried to create a game using GSAP? Can you please share it?
-
Hi! Whenever I refresh my webpage, therefore, the first time this fireball animation happens, it doesn't happen as expected. 1 time this animation is called -> wrong, 2+ time it's called -> works as expected Im following a tutorial, however, I copied everything as the guy and mine didn't work. Although I'm using typescript and not javascript. I posted my relevant code on codepen. I can't upload a video so here's a link to a place where I could upload the video. https://files.fm/u/u2syy2ufk (I hope it isn't against tos) Thanks!!
-
I have applied id="smooth-wrapper" and id="smooth-content" by wrapping with div. But it is not working. I followed https://codesandbox.io/s/stupefied-minsky-pzceim?file=/src/App.js:733-752 but couldn't understand how to apply ScrollSmoother in these component based structure.
-
So, we had a web dev build our new homepage. He used NodeJS and had us 'run npm build' to build it on our end. We managed to get the main page loading fine on our wordpress based site. It required us to wpenqueue the npm generated bundle.js file. However we wanted to use the footer he put together on the rest of the site. The issue we're running into is the footer element that needs to animate does not work. It only works on the homepage which has a ton of elements to it. Hopefully somebody here can give me some clues about how to get this to work. I do understand that import gsap from 'gsap'; won't work on codepen the way I have it written, but I wanted to keep it as close to the original as possible. There's also an export function initLogo() line (the file this javascript is pulled from is called Logo.js). There is a general script.js file which includes the following, but I'm not sure if it's relevant here or not //general css style import './style.css'; //component css styles import './header.css'; import './oscilloscope.css'; import './hud.css'; import './ticker.css'; import './tv.css'; import './team.css'; import './footer.css'; import './logo.css'; import { MousePosition } from './shared/MousePosition'; import { initOscilloscope } from './oscilloscope/Main'; import { initHud } from './hud/Hud'; import { initTicker } from './ticker/Ticker'; import { initTv } from './tv/Main'; import { initTeam } from './team/Team'; import { initLogo } from './logo/Logo'; //track mouse position const mousePosition = new MousePosition(false); mousePosition.init(); //oscilloscope initOscilloscope(mousePosition); //hud initHud(mousePosition); //ticker initTicker(); //tv initTv(mousePosition); //team initTeam(mousePosition); //logo initLogo(); Any insight would be much appreciated.
-
(title edit: Animation not starting when entering screen) Hello! I'm trying to figure out how to make a timeline for ScrollTrigger, but i'm clearly doing something wrong. I want the 2 lines in the middle section, to move when they enter the viewport, but I can't get them to animate at all. What could I be missing? Thanks!
-
Hello, The delay property doesn't seem to work for me while using ScrollTrigger; it does work on loaded animations. Is it supposed to be disabled on scroll? If so, is there another way to delay scroll triggered animations? Really loving GSAP3 so far. Thank you, Julius
-
Hi, I want to ask can animation synchronize with timeline? Mean first we define the timeline then animation will start depend on the timeline, for example the timeline have 10 second and will run from 1 to 10, at second 2 the animation A will start and at second 6 the animation B will start, if user seek at second 7 the animation B will start half way instead from start, like ScrollTrigger with scub, for example: // Create timeline with 10 second const timeline = gsap.timeline({duration: 10}); // At second 2 this animation will run gsap.to('divA', {x: 100, y: 100, startAt: 2}); // At second 6 this animation will run gsap.to('divB', {x: 900, y: 900, startAt: 6}); // Start count from 1 to 10 timeline.start(); // When user click will seek to second 7 document.querySelector('timelineBar').addEventListener('click', function() { timeline.seek(7); }); Thanks
-
Hello everyone, I was in the process of recreating an effect I made with draggable but this time using TweenLite and while I managed to correctly get the x and y position of my draggable onDrag, I couldn't get these position onUpdate in my tweenlite. Actually I do get a result but it always returns 0 for some reasons. I have actually searched for 4 hours and tried A LOT of solution that were presented on the forums as well as some solutions on stackoverflow and none worked. This was the closest I could get: http://jsfiddle.net/Wurielle/tn9t84d4/14/ The image on the bottom is a draggable element that works just fine by inverting the x position of the content from the x position from the container. I would like to have the same effect with tweenlite but whatever I do I can't seem to get the correct positions. TweenLite.to(slide, 1, {x: "0%", onUpdate: update, onUpdateParams: ["{self}", slideContent], ease: Power4.easeOut}); ... function update(el, target){ var x = el.target[0]._gsTransform.x; var y = el.target[0]._gsTransform.y; TweenLite.set(target, {x: -x+"%", y: -y}); console.log(x, y); } Am I doing something wrong? I really can't figure it out..
-
I want the SVG animation that I found on the left to have the same effect on the right element. What am I doing wrong?!!?!!?! This is driving me crazy -- why is there a double stroke effect? How can I fix this. Any assistance would be greatly appreciated. Thanks! -
So, I have a small problem. I want to be able to customize things in the throwprops plugin, like friction and bounciness. But it doesn't let you do anything like that, so I wondered, is it possible to combine the functionality of the two plugins?
-
Stumped on this. I would like to use the attr plugin to do a simple animation for my banners, basically just have an image animate in from the side or top. This page makes it seem like I could use the attr plugin to animate the x, y coordinates of an element. I can get the heigh and width animation working as long as I use a table, but can't figure out how to get the x and y working. https://greensock.com/AttrPlugin My html and scripts are attached. Archive.zip
-
This tweet is where it started https://twitter.com/gryghostvisuals/status/556154294823813120 I'm doing a series of tutorials and articles for Tuts+ on TimelineMax so I'm interested in types of effects and demos readers would like to see included in this series. Thanks in advance for your ideas posted \o/
- 8 replies
-
- 3
-
-
- gsap.
- timelinemax
- (and 7 more)
-
Dear People, I love using your library, It's simple and very effective. I have a simple question, I've look in the documentation but can't find an answer. How can I recieve the TweenMaxEvent inside my event handlers ? example: TweenMax.to(iSprite, iRandTime , { y:_topYSpot, onComplete:onEffectComplete } ); private function onEffectComplete(e:Event = null):void { trace (e); } onComplete always comes to the function with no event, is there any way to recieve the event and know the target/currentTarget as usual AS3 code. Thanks In Advance and have a great day. K
