Leaderboard

Here you go. There was a whole lot of slightly weird stuff in the codepen I forked, some things that had no use and other things that didn't follow the same coding style, as if someone else had modified the pen but still saved it in @Jonathan 's account... I'm not sure what happened there... anyway, I cleaned it edit: changed the image service to loremflickr since apparently unsplash is down...? also now it picks 10 different pictures

yup. when you have two tweens at the same time trying to animate the same property of the same object you will cause an overwrite which means the new tween will kill the existing tween. Its wasteful to have 2 tweens fighting for control at the same time so GSAP has this optimization built in. So when you play your timeline again, some of the tweens have been killed thus making the animation look different. 2 solutions: change your timing so that tweens do no not overlap as the guys suggested put overwrite:"none" on the offending tweens demo of overwrite:"none" EDIT : Previously had wrong demo here / fixed now

Try moving your "$('.planet').hover ..." to be within $(document).ready(). I dont' think they are ready when the script tries to bind the hover event handler to them. $(document).ready(function() { TweenMax.to(".planet-name", 0, { xPercent: '-50' }); // ----- PLANET HOVER ------ // $(".planet").hover(function() { console.log("help me"); TweenMax.to($(this), 0.5, { scale: 1.8 }) TweenMax.from($(this).siblings(), 0.5, { bottom: "-40%" }) TweenMax.to($(this).siblings(), 0.5, { opacity: 1, }) }, function() { TweenMax.to($(this), 0.5, { scale: 1 }) TweenMax.to($(this).siblings(), 0.3, { opacity: 0, bottom: "-20%" }) }); });

Something to do with the offsets ... I've removed them and it appears to be functioning as you would expect it to.

Hi, Well since you're using react router and you have an overlay covering the entire content of the site perhaps using transition group with GSAP might not be necessary. The main question is this: Is the color overlay transparent in any degree or solid color?. Depending on the possible answers, these are the scenarios. Case: Solid Color Overlay The color overlay hides all the content, so there's actually no need to use transition group in order to animate each route's component's mount/unmount. Just use GSAP to animate the color overlay and using an onComplete callback, use history (a dependency used by react router and passed as a property to every component in a <Route /> wrapper) to push the next route. In this scenario the only catch is that the overlay component has to reside inside of a route (you can put it in the root route "/" or wrap it in a <Route /> component), which shouldn't be too complicated since I'm assuming it has a fixed position and a z-index that puts it on top of everything. It could be like this: Overlay component, as you can see the idea is to render it in every route, that's why there's no exact attribute in the Route component. Also the Route component is passing it's own history property to the overlay component class App extends Component { render(){ reuturn <div> <Route path="/" render={ props => <ColorOverlay history={props.history} /> } /> // the rest of the routes here </div>; } } Color overlay component import { connect } from "react-redux"; import { toggleOverlay } from "./actions"; // depending on your actions path class ColorOverlay extends Component { constructor(){ super(); this.overlayTween = null; this.overlayElement = null; this.overlayTweenComplete = this.overlayTweenComplete.bind(this); } overlayTweenComplete(){ const { history, targetRoute, toggleOverlay } = this.props; // here's all the magic // at this point the overlay is covering all the content // so we can change the route using history passed in the props history.push(targetRoute); // now the route has changed and we can reverse the animation // revealing the new rendered component toggleOverlay(false); } componentDidMount(){ this.overlayTween(this.overlayElement, 1, {/*config here*/, onComplete:this.overlayTweenComplete, paused:true}); } // we're updating the visibility via redux, so we look for // updates in the props componentDidUpdate(prevProps){ const { overlayVisible } = this.props; // check if the visible prop is the one that changed if ( prevProps.overlayVisible !== overlayVisible ) { overlayVisible ? this.overlayTween.play() : this.overlayTween.reverse(); } } render(){ return <div>/*your overlay html here*/</div>; } } const mapStateToProps = state => ({ overlayVisible: state.overlayVisible, targetRoute: state.targetRoute }); const overlayActions = { toggleOverlay }; export default connect( mapStateToProps, overlayActions )( ColorOverlay ); In the snippet I'm making some assumptions that is worth clearing up. First I'm assuming that since you want an overlay over the content using react router's <Link> or <NavLink> is not necessary for every button that should trigger that functionality. If you need a button, link or menu item to not use this overlay transition, then use the normal way of doing that with react router. Second you should have an action creator to toggle the overlay visible property in the store and the target route. The overlay visible is just a boolean and the target route is the string of the route to push into react router, so it should be in this format "/about", "/products", etc. So instead of using a link or navlink with the to="" attribute to change the route, just use an onClick event to update the target route first and then play the overlay animation: import { connect } from "react-redux"; import { toggleOverlay, updateTargetRoute } from "./actions"; // depending on your actions path class MainMenu extends Component { constructor(){ super(); this.buttonClickHandler = this.buttonClickHandler.bind(this); } buttonClickHandler(target){ const { toggleOverlay, updateTargetRoute } = this.props; // update the route in redux updateTargetRoute(target); // now that the target is updated toggle the visible state toggleOverlay(true); } render(){ return <div> <button onClick={this.buttonClickHandler.bind(null, '/')}>Home</button> <button onClick={this.buttonClickHandler.bind(null, '/about')}>About Us</button> <button onClick={this.buttonClickHandler.bind(null, '/products')}>Products</button> </div>; } } const menuActions = { toggleOverlay, updateTargetRoute }; export default connect( null, menuActions )( MainMenu ); (the syntax highlighter is messing up the color, but the code should work). The reason to control both the play state of the tween and route of the app via redux is that it could be a slight delay while setting the target route and also the fact that if you need the value elsewhere is already in the store. Something like this should be able to animate the overlay before changing the routes and then remove the overlay after. Case: Transparent Color Overlay In this case the content under the overlay will be visible so my guess is that you might need to actually animate one route being unmounted and the other route being mounted. If that's the case take a look at this sample (codepen doesn't have the features to import and mimic real work flows so I use codesandbox for more complex React & Gsap samples): https://codesandbox.io/s/mqy3mmznn Happy Tweening!!!

I'm not exactly sure what the animation is supposed to do I think it's supposed to do a kind of double blink but I believe the problem is because the timing on your second "blink" is overlapping the first one. The first animation would end at 0.9 but your telling the second to start at 0.75.

The Good Sir @Jonathan is a wizard with carousels. Here's one that can probably lead you to a solution. Happy tweening.

Hi and welcome to the GreenSock forums, I didn't see any animation in your demo. I would suggest stepping away from the carousel aspect of it for a while and get just 1 image to animate in the fashion that you want. Any time you are relying on 3d with css and maintaining stacking order things can get screwy pretty fast. You might want to consider placing each image in a parent element. Rotate the parent using rotationY and then counter rotate the image so that it keeps the face of the image facing towards the user. FWIW I spent a good half hour or so monkeying around with it, but it didn't really work to my liking. Someone around here may have something similar to show, but unfortunately our support has to stay focused on the GSAP API and not so much on building prototypes of advanced effects.

Hi and welcome to the GreenSock forums, I'm not really understanding the question. It sounds a bit complicated. I'm not sure if your question has to do with ScrollMagic (not our product) or a more general javascript question. Unfortunately GSAP doesn't have tools for detecting when certain objects are in the viewport. If you need help understanding ScrollMagic triggers and other features perhaps try posting in https://github.com/janpaepke/ScrollMagic/issues If you have a question that relates to the GreenSock Animation Platform please let us know, we will be happy to help.

Hello @Githubish and welcome to the GreenSock forum!, I know I'm jumping in late.. I didn't have time to mess with this right at this moment. But you can achieve this star shape vs the traditional circular shape of the carousel, by messing with the existing math for each <figure> so the rotateY() is adjusted with the angle you want. And then compensate the translateZ() to be adjusted based on the new rotateZ() angles position. I messed with this in the browser, but I suck at math on the fly without trial and error with limited time. But like @Carl advised a codepen actually showing this in action would go along way in helping us (the GreenSock community), see what this is supposed to look and animate like. Happy Tweening!

I feel like the difficulty here is that the images don't form a "circle", they kinda rotate in the opposite direction. Maybe a way to do that would be to have inner divs that have a independent rotation with their transform origin unchanged. I'll fork one of Jonathan's pens.

Yeah - I'm with @Carl here. I'm not really understanding the question. I think you want the buttons on the left to trigger their opacity when the corresponding section hits a certain point? You're combining some jQuery toggles with ScrollMagic .setClassToggle and GSAP window scroll tweens. I had trouble following the demo with all that. One thing that does stick out and is causing an error is your triggerHook in the global scene options. You have triggerHook: ".topic-wrapper", but that is not a valid value. I'm not sure you need the duration in there either since you're just toggling classes. I think something like this would work better: var controller = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: 0.1, offset: 100, reverse: true } }); As Carl mentioned, you'll probably have better luck on the ScrollMagic forum. If you want to simplify your demo a bit and use GSAP for everything we can probably offer some additional guidance about the GreenSock elements of your project. Happy tweening.

Ahh, sorry missing closing parenthesis there. It should be: <button onClick={this.buttonClickHandler.bind(null, '/')}>Home</button> By the actions path I mean, that since you're using redux you have actions and action creators. Normally in small projects you put all your actions and action creators in one file and export each one as a named export. In larger projects people like to ether put each component, it's own reducer and actions in separate folders, or create a components folder, an actions folders and a reducers folder to place each components actions and reducers and export them via an index.js file. I'm assuming that you have some degree of experience working with redux and react-redux. If you're not very familiar with it you can check this resources: https://redux.js.org/faq/code-structure https://medium.com/front-end-hacking/the-three-pigs-how-to-structure-react-redux-application-67f5e3c68392 https://marmelab.com/blog/2015/12/17/react-directory-structure.html https://egghead.io/courses/getting-started-with-redux The egghead course is by Dan Abramov himself (the creator of redux). He goes kind of fast but the concepts are very clear though. Happy Tweening!!!

Hi Rodrigo. Thank you so much for taking your time to share that! Although I'm having a few issues: I'm getting a: Module build failed: SyntaxError: Unexpected token, expected , On the <button onClick={this.buttonClickHandler.bind(null, '/'}>Home</button> Second: What do you mean with this: // depending on your actions path What needs to be in my actions file? Thanks! Really appreciate it!

hmm, made up a pen, and whilst it's a bit different, GSAP works exactly as you'd said (and I originally expected.) I'll need to investigate the issue further - but, for now, it would appear not to be a GSAP issue.

You can definitely use GSAP for React animations - lots of people do. Unfortunately I'm not a React guy so I can't be much help. However, @Rodrigo might - he's the resident React/GSAP pro I know Sarah Drasner ( @sdrasner ) is another great resource for animating things in React with GSAP, though she's rarely in these forums. I didn't see any GSAP code in your sample code at all. Were you just asking how/where to add it (to replace the CSSTransition stuff)?

They're looking for this line in your html file: <script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script> Then make sure your click-throughs and other events are using their Enabler class.

I think this is more like what you wanted: The wrong syntax was used in the tween, and the SVG markup needed fixing (coordinates mostly), and there was a misspelled "visibility" in the CSS. Better?