Search the Community
Showing results for tags 'direction'.
Found 5 results
-
Greetings everyone, I have recently started to work as a Shopify Developer and I have a task to tackle. The developer before me used ScrollTrigger to animate the Home page. It would display one div (slide) that would cover the full size, and when scrolling, the next div coming from the bottom would overlap the existing one, continuing the scroll this animation would repeat until there were no more slides left. Now the client requested that I have this same animation but in reverse, when scrolling, slides would appear from the top and overlap the existing one. Is this possible with this current JS code, or do I need to make this from scratch? I've managed to find a Post here that has CodePen that shows what is my current animation.
-
Hiya everyone. I am new here but really hoping someone can help me out as I would love to use this amazing library to achieve this cool effect just posted on codrops; (https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/). You'll see in the article it explains that the effect works on the direction of your cursor - actually it has two effects, one for when the image is revealed/hidden and the other for moving the mouse over the nav title. I'm trying to adapt the direction based element of this effect into a Webflow project and I am struggling with this because the tutorial seems to go the long way round of achieving these effects (see the layout at the start of the tutorial) and also the fact that there are multiple JS files created. I am fairly new to js and also GSAP (love it though) so a lot of this is a bit overwhelming and also makes it very hard to achieve using Webflow but essentially I would like help with these two directional based effects on hover; 1) I just want to reveal and hide elements on hover with the direction dependent on the mouse direction 2) moving the mouse to the left rotate's the image to the left, and to the right it does the inverse. If anyone is able to offer me help I would hugely appreciate it! Thanks so much
-
Simple question with perhaps a complicated answer. Is it possible to animate multiple objects towards a central point in GSAP? Rather than adding positioning tweens to each individual object? For example I have a scene with objects around the canvas, I'd like them to slide onto the canvas towards the middle of the canvas.
-
Hi Guys, I stumbled upon this rare behaviour and I'm not sure if it's happening because what I'm trying to achieve or something else. I have a TimelineLite and at some point an addPause() instance in it. The timeline is not nested and doesn't have any other timeline in it, just common from and to instances, nothing fancy. I added a callback in the addPause() method. What I want to achieve is to call the function when the timeline is going forward and reaches the addPause(). Then execute some code (load some resources asynchronously) and when that's done resume the timeline going forward. Then when the timeline goes back, of course it'll be paused and the callback in the addPause() will be executed. Here's when things brake. I created a boolean so when the timeline goes forward and the boolean is false load the resources and change the boolean. Then when the timeline passes through the addPause() again ignore the rest of the code in the callback and just resume so it goes back to time zero. Instead it keeps calling the addPause() callback and returning to that point in the timeline endlessly. I also tried using a TweenLite instance to take the progress of the timeline back to zero but as soon as the tween is completed the timeline starts again, even if I changed the pause state of the timeline before creating the tween, which shouldn't have any effect whatsoever in the play/paused state of the timeline (uncomment lines 32-33 and comment-out line 31). The only way it works is by forcing the timeline to be paused using an onComplete callback in the tween that changes the progress of the timeline (remove inline block comment ), which IMHO it's a bit hacky and strange. Rodrigo.
- 4 replies
-
- 2
-
-
- timelinelite
- addpause
- (and 1 more)
-
I am tweening an objct on a circular path: TweenLite.to(glareMC, 2, { circlePath2D: { path: circlePath, startAngle: 225, endAngle: 225, direction: Direction.COUNTER_CLOCKWISE, extraRevolutions: 1 }} ); I'd expect to see a CCW motion, as specified in the direction property, but the glareMC moves CW: why? If I change endAngle to whatever different from startAngle the animation looks correct: is this an unhandled exception of the motionPath engine?
