Leaderboard

Yes, it looks like @mikel already advised what i would have.. to use z-index to control the stacking of the active pages. Some resources: CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index Understanding CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index The Stacking Context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context Happy Tweening or Flipping!

Hi @namisuki, Of course, @Jonathan will offer a perfect solution. Here is a version tweening z-index: Happy flipping ... Mikel

Hi, @GreenSock is right. The main concern when dealing with any type of shadow dom library/framework is what's called DOM reconciliation (something @OSUblake has more knowledge than I am). Here's what React's official docs say about reconciliation: https://reactjs.org/docs/reconciliation.html But back on the specific question, yeah the issue is that GSAP doesn't have the slightest idea of what could make the resulting DOM to change and as Jack mentioned is a bad idea performance-wise, so GSAP takes care of it's own end and so does React (and Vue and other shadow dom libraries as well). They work in what's called a reactive way. Something changes that makes necessary a DOM update. The good news is that all those tools offer what's normally called lifecycle methods/hooks (do not confuse with the new hooks API introduced by React) which help you do stuff, before or after the DOM is going to change as a result of a state property being mutated. That's why in every piece of documentation is highly discouraged to reach and manipulate the DOM directly, hence the usage of references (refs). The only thing you have to be careful about is that if an animation is running a somehow your DOM could change and remove the tween target, be sure to kill those animations in order to prevent an error being thrown. Here is where the lifecycle methods are handy because you can use them to create the animations once the DOM has been updated and you can be sure that the elements you want to animate are present and you wont get an error or unwanted behaviour, and that you will be able to act before those elements are removed. As you mention, seems that you've been selecting elements after those elements are rendered, so they are there and as you can see, since that's just good ol' plain javascript, it works. But is safer and more appropriate to follow each library's guides and patterns to do so. Finally, I've check some things about React hooks but I haven't mix them with GSAP for two reasons. First, I haven't had enough time. Two, keep in mind that hooks are on the roadmap of version 17 of React, they are still a proposal and the React team is gathering information, bugs and opinions from the community as well as doing their own tests, so thechance that the API could have some major differences from what it is now is not small, so I try to stay away from using them in any type of production code. Also I don't like to invest a lot of time in things that are not even in beta or at least release candidate (RC version), because of changes in the future. But as you mention the effect hook is an easier way of triggering something because a state change. Hooks are very nice and a great addition to React and most devs I've shared some thoughts on them, are very in to hooks (they are hooked ), so they are here to stay most likely, but changes in their API will be inevitable moving toward a stable release. I'll see if I can whip something using hooks, but you caught me in a couple of bad days, so perhaps tomorrow night or Friday I could get into that. In the mean time feel free to continue the discussion here or if you want you can PM me. Happy Tweening!!

@emilychews One method would be to get all dots (by classname) into an array and generate a random number between 0 and the length of that array minus 1 (for the indexes available in that array) and tween the element randomly addressed. Here is a CodePen illustrating that. (note though that the Pen doesn't look to see if the random integer is different than the previous random integer ... which means the same dot could tween multiple times in a row) Hope this helps! Shaun

Thanks @explorerzip, I usually do but it just ended up inline while I was debugging this one, will use it externally in future if it works. Cheers!

It seems that moving the JS library links to the bottom of the <body> tag instead of the <head> fixes your problem. I also wrapped the animation in a function when I was troubleshooting, but it seems fine even without doing that.

Awesome. Really appreciate the level of insight. If I’m understanding this correctly (and allow me to summarize here) — The surest way to get GSAP and React working together is to leverage lifecycle hooks, in that you’re able to control the creation/start of animations only after the DOM has rendered or completed an update to the DOM. With that in mind, we mainly use componentDidMount and componentDidUpdate respectively. The most obvious reason for wanting to leverage lifecycle hooks is to prevent the situation where a tween target gets removed during an animation due to an update to the DOM. Although the approach of selecting elements through css selectors ‘works’ given that I’m placing the animation logic in componentDidMount/useEffect, it is not best practice, less safe, and thus prone to unexpected/unwanted behavior. Regarding React hooks — I completely agree, and understand that I’ve taken a risk in investing time into React hooks. I just couldn’t help myself. XP. Lastly, I would certainly love to see your implementation with React hooks (React in general), but if you have to go out of your way for this, no worries -- if anything I can try to whip up something myself and you can have fun demolishing it. I'll have a little bit of time tonight, and more so over the weekend. But when I do come up with something I’ll be sure to PM you. Thanks again!! @GreenSock @Rodrigo

Hello @namisuki and Welcome to the GreenSock Forum! To make an image slider it would have many parts. As far as the flip swinging door effect, here is an example of doing that in GSAP. It uses a mouseenter / mouseleave event, but the event can be changed to click. But it will show you the HTML markup and CSS used to setup a swinging door effect, and animating the CSS rotationY (rotateY) property. Happy Tweening !

Thanks ? I started out learning how to make games instead of websites, and I think that has helped the most. Game development takes user interaction, animation, and performance to a whole other level. I've learned a lot from Keith Peters with his Coding Math videos and HTML5 Animation with JavaScript book. https://www.youtube.com/user/codingmath http://lamberta.github.io/html5-animation/ And from Daniel Shiffman with his Coding Train videos and Nature of Code book. The Nature of Code uses the Processing language, but it's pretty easy to understand and convert to JavaScript. https://thecodingtrain.com/ https://www.youtube.com/user/shiffman https://natureofcode.com/ I would also recommend making a bunch of pointless things. It might like sound like a waste of time, but that's where most of my skills come from. I really like the point Steve Gardner makes in this video about making pointless things. If his mission was to create pop.svg before he made all the pointless things, he couldn't do it. It's the journey of making pointless things that got him to pop.svg. That got me thinking about all the pointless things I've made on CodePen. I've never checked before, but I sure do have a lot. I couldn't find a way to get the number of pens I've made, but 116 is the last page, and there are 25 pens on every page, so around 2900 pens. If I only had 50 pens, I would probably be pretty lame, worrying about stupid stuff like "which framework should I use, and does it have hooks?" So that's the journey of what got me to where I'm at, making games and pointless things.

I'm not sure what you're asking. All the examples in the showcase use GSAP as their animation engine, but many use other libraries like three.js or Pixi. GSAP doesn't do any rendering. It's an animation engine that animates values. All the rendering is handled by the browser. Hopefully that helps. Happy tweening.

It's been discussed a few times.

UGH, sometimes the answer is much easier than expected. Another option is to just set overflow:hidden on the text div and adjust the height: