eddiedev
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by eddiedev
-
-
Hello community of GreenSock,
I'm back with another rather dumb question to which I can't find an answer myself. I'm currently trying to figure out how to get 2 or more canvases to play after each-other (as you can see in the pen, there are 2 identic canvases that play after each other, without any space between them). My approach seems a bit off but that's not the main issue here. Everything works fine (both the animations finish properly) when the "markers" property is set on "true", but, when set on "false", the second animation doesn't finish (it only goes to the 115th frame out of 147).
Does anyone know why this is happening. Any explanation / response is welcome and appreciated, Thank you!
See the Pen KKZegoL by edi-bociu (@edi-bociu) on CodePen
-
Thanks again for every explanation and for the time you spent doing that demo, it is literally what I've been working on the past days. I'll start looking more into the simpler concepts for now.
-
2
-
-
I'm also looking for a way to get better control over the relation between the text and animation (a way that allows me to display some text exactly when a specific frame comes up).
-
Thanks for the response Paul! Very helpful and detailed.
4 minutes ago, akapowl said:There is an example in that airpods thread I showed you yesterday, showing one possibility of how to do something like that
I've taken a good look at this yesterday and that example is indeed exactly what I'm looking for. The thing is that I'm using absolute and relative positioning whereas he is using "position: fixed" so I find it hard to implement something similar in my case. I was thinking about using position fixed as well and after the animation finishes just unset it but I'm not sure if it's a great idea.
-
16 minutes ago, Cassie said:
Hey Eddie.
have you watched this instructional video?
In terms of what you can animate - GSAP can animate pretty much anything animatable (and many more things that technically aren't.)
It would be impossible to write a complete list.
If you're coming from a CSS world this is a small idea.GSAP CSS duration: 1 animation-duration: 1s repeat: -1 animation-iteration-count: infinite repeat: 2 animation-iteration-count: 2 delay: 2 animation-delay: 2 yoyo: true animation-direction: alternate fill: '#008080' fill: #008080 stroke: '#008080' stroke-color: #008080 opacity: 0.5 opacity: 0.5 x: 100 (svg units) transform: translateX(100px) y: 100 (svg units) transform: translateY(100px) xPercent: 50 transform: translateX(50%) yPercent: 50 transform: translateY(50%) scale: 2 transform: scale(2) scaleX: 2 transform: scaleX(2) scaleY: 2 transform: scaleY(2) rotate: 90 transform: rotate(90deg) transformOrigin: '50% 50%' transform-origin: 50% 50% - fill-box svgOrigin: '100 200' transform-origin: 100 200 - view-box Hi Cassie, yes I have actually seen that video a few times now. It is actually very helpful but it provides rather brief information so it doesn't help much with what I'm trying to accomplish.
Thanks for the table though!
-
Hello guys,
Thanks to the detailed response I got yesterday I was able to advance a little more (I'm still trying to reproduce the AirPods animation in order to get the hang of scrollTrigger). I was able to add more effects (opacity, scale, etc.) but I'm still a bit confused.
Firstly, on the apple website, there is more than 1 piece of text that scrolls through. However, I can't seem to find a way to make more than 1 div of text to scroll through. One approach I've tried is using the "onLeave" property to change the text content but I don't think it's a reliable solution as it won't work multiple times as I can't get it to repeat.
Secondly, on the original website, there is more than one animation scene (the one presenting the insides of the airpods, etc). I'm not sure how to do anything like that, Is it by using multiple canvases or just wiping the current canvas and starting to display a new animation on it?
Also, is there any docs page that states every property that can be changed during the animations (like opacity, x, y ,etc.)?
Thanks for reading, any help is appreciated!
See the Pen LYemWxy by edi-bociu (@edi-bociu) on CodePen
-
Thanks for the nice, detailed explanation @akapowl. Glad to be part of such a friendly community!
-
1
-
-
Hello fellow developers,
I started looking into the ScrollTrigger plugin as it seems very interesting, and while looking on the GSAP's codepen profile for different project ideas, I found this nice airpods animation. After looking into the code I figured out how 80% of it works but I still have some questions.
Firstly, how does the "airpods" variable work? It obviously increments after each frame but I don't seem to find out where exactly it does that. Also, it uses the function gsap.to(airpods, {....}) which doesn't make much sense as "airpods" doesn't look like a proper html element. Fruthermore, I can't figure out why Inside the gsap.to function there is "frame: frameCount - 1", as the "frame" property doesn't appear on the docs at all.
Secondly (this is more of a curiosity of mine), on the official apple website it also presents some features of the airpods while running the scroll triggered animation on the background. I was just wondering how would that be possible given the fact that the animation on the codepen acts like a fixed html canvas, so it would be a pain to display any other kind of media on the website.
Thanks for reading all the way, even though some questions might not make any sense at all. Any help is appreciated.
See the Pen ZEaZyZr by GreenSock (@GreenSock) on CodePen
The animation somehow only works properly only when "markers: true"
in GSAP
Posted
Thats actually a very good response, thanks! I knew that I was doing many things wrong and it felt wrong that the first animation won't play when scrolling back, but I just thought I'd fix that after figuring out why the markers behaved the way they did. Also, I've done that "start: "+=10" so the animation would already be fired when the page refreshes, as otherwise you'd have to scroll 1px to fire it.
Cheers!