Leaderboard

Great examples, guys! Here is another approach from @OSUblake using the ModifiersPlugin which isn't necessarily simple, but it is dynamic. Blake's ModifiersPlugin collection: https://codepen.io/collection/AWxOyk/ more on ModifiersPlugin: https://greensock.com/modifiersPlugin If you're animation is canned, as you say, Shaun's solution should work very well.

Hi @mrtips I'm not sure what your final project will be doing, but here's a slightly different take on your request. By using Draggable's endX and endY I have one div chase another after you throw the first one. I'm not sure if that'll be helpful for what you're doing, but thought I'd throw it out there as an option. Since you're a Club GreenSock member (thank you), you also have access to the ThrowProps plugin which has a cool velocity tracker if that is part of your master vision. More info: https://greensock.com/docs/Plugins/ThrowPropsPlugin https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.getVelocity() Hopefully that helps. Happy tweening.

Well, you *can* get the x/y of the tweening element at any time in the tween. Craft your timeline in a paused state ... use .progress() to position the playhead at a specific point after your initial tween is defined. Then retrieve the top/left at that point to use as the values in your second tween. Finally, play the tween from 0.

You'll want to use relative offsets to allow successive tweens in the timeline to being before the previous one completes. Here is an example of that in action: And more on sequencing here: https://greensock.com/get-started-js#sequencing

Hi @SoldierCorp Welcome to the forum. You can also turn that into a loop to tidy things a bit. Doing that would also give you the option of creating a separate timeline for each group and the first one could restart before the last one ends to create even more of a 'wave' feel. Just my two cents worth. Happy tweening and welcome aboard.

You know, the problem here is there are just too many cool things available in GSAP.

Hello @keepRunning and welcome to the GreenSock Forum! Yeah browsers wont even let you style specific CSS for <option> HTML elements. Chrome or other webkit based browsers used to allow CSS to style both <select> and <option> elements, but they have been pretty poopy pants about styling <option> tags lately. So the browser will reject certain CSS properties for visual, layout, and transforms on <option> tags. The HTML DOM interface won't allow it. The browsers only allow things like font-size, font-family, font-variant, font-style, color, background-color, background, etc like Blake said above When i look at the spec for <option> tags there is no mention of this https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement https://www.w3.org/TR/html50/forms.html#the-option-element Only other route is like Sahil advised is where the original <select> tag is hidden. And then you create a custom dropdown with animated option tag using <ul> and <li> tags.. or use a jQuery UI dropdown select that is jQuery custom HTML. Happy Tweening!

Always good info from the Oracle of CSS. This is one of those things that should be so simple, but is made into Mission Impossible. It reminds me of vertically centering something back in the day. It took a team of 16 people working 12 hours shifts for 6-8 weeks to vertically center some content in a div.

You can't animate option tags, plus styling them consistently is almost impossible. You can instead use something like jQuery UI which replaces your select tag with custom HTML that you can style or animate as you like. There are many other libraries/frameworks that do same thing but be sure to check if they are accessible.

I've never messed with <option> elements, but it doesn't look like you can change the position or transform it. If you animate something else like the backgroundColor, you'll see it work.

That's exactly what I was looking for. Thank you @Shaun Gorneau

Hi, Honestly going through all the motions to teach you how to work with redux is out of my capacities in terms of the required time and where exactly you are right now in terms of your coding knowledge. Redux basically let's you rescind, as much as possible, of using component's states in order to keep reference and track of different properties that might change during the app's life cycle. Before redux (and also is worth mentioning it's predecessors Flux and ReFlux) and mobx, a React app had references in the states of different components. The issue was that when you needed to access the state of a sibling component all hell was unleashed, because you needed a method from the parent component to be called in Child A in order to pass that property to the parent and then to Child B. Of course the deeper a component was in the app's tree, the bigger the unleashed hell. It was coding nightmare. Enter redux. Redux is just an object (store) with all the properties you want to keep track and it's accessible via the connect high order function from react redux in all the components of the app that you need. The point is that in order to add and update the property in the store you need actions and actions creators. Those are added to the component's props so they can be accessed and used easily. I strongly recommend you to go through the egghead course (I believe is free) and redux's official docs in order to get a better grasp of how to work with redux and react, is really not that complex. Regarding the error is fairly simple. You're trying to render something that comes as undefined. Similar to this: class Route extends Component { render(){ return <div> // some component here, most likely a function is returning undefined </div>; } } In the comment I mention a function, but also could be a ternary operator or some iteration of a map array helper. Without the entire code and the data structure is impossible to tell. A common scenario is that, since the render method can be called more than once as the state and props are updated (mostly during async code) an array could be empty or something else could be coming as undefined, therefore passing that to the render method which ultimately returns that error. You can use chrome's debugger to put a break point in that render method in order to check the call stack and the scope or use console.log() in the render method, before the return statement of course: class Route extends Component { render(){ console.log(/*check props and state here in order to track what could be returning as undefined*/); return <div> // some component here, most likely a function is returning undefined </div>; } } Happy tweening!!!

thats a very interesting take that I might be able to use as what I have is a canned animation. THANK YOU!

@OSUblake Thank you very much for your assistance. The results aren't exactly what I expected, but this is a big step in the right direction (no pun intended)

Can't believe I didn't see that one myself. But thanks! Regarding the actions, I don't have THAT much experience with Redux. I just know what it does overall, but I'm using a Boilerplate, so that's why all the Redux stuff is there. What do I put in the actions folder considering the Page transition code you posted above? Also, I'm getting the following errors after I added the code: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Route`. in Route (created by App) in div (created by App) in App in Router (created by BrowserRouter) in BrowserRouter Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Route`. Why is that? Again, thank you for taking your time with this! It's really helpful. I'll give you some coding credit once my Portfolio is done and dusted.

Thanks for all response guys, I guess i need to use third party then integrate gsap.

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.

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.

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!!!

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%" }) }); });

Oops! I just realized you were animating position. Object.defineProperties(THREE.Object3D.prototype, { x: { get: function () { return this.position.x; }, set: function (v) { this.position.x = v; } }, y: { get: function () { return this.position.y; }, set: function (v) { this.position.y = v; } }, z: { get: function () { return this.position.z; }, set: function (v) { this.position.z = v; } }, rotationX: { get: function () { return this.rotation.x; }, set: function (v) { this.rotation.x = v; } }, rotationY: { get: function () { return this.rotation.y; }, set: function (v) { this.rotation.y = v; } }, rotationZ: { get: function () { return this.rotation.z; }, set: function (v) { this.rotation.z = v; } } }); Then try animating just the object. TweenMax.to(myObject3d, 4, { bezier: { type: 'soft', values: [ { x: 0, y: 0, z: 0 }, { x: 100, y: 100, z: 100 } ], autoRotate: [ ['x', 'y', 'rotationZ', 0, false], ['z', 'x', 'rotationY', 0, false], ['z', 'y', 'rotationX', 0, false] ] }, ease: Power1.easeInOut });

The pointer event might not be used for the actual gesture event. It could be used to detect the start of a gesture, and how many fingers are being used. It's a really complicated topic because of differences in the device and browser being used. Nothing is really standardized. I looked at the some of the examples in the link I provided for the pointer events, and noticed something I've never seen before, a gesture event. It looks like it is something that is only supported in Safari browsers. https://developer.apple.com/documentation/webkitjs/gestureevent

Looking for a developer with experience using greensock for simple html5 banner work. This would be recurring work, semi-consistently. I need someone that can take exported graphical assets (or PSD, Illustrator, or InDesign files) and animate them according to a PDF layout/guide or simple instructions. E-mail me if interested for details on payment and any other questions you may have: mexipinomexipino@gmail.com - E

We can use external libs in our ads. Make a "scripts" folder in the ad's folder, copy the .js of the lib here, and <script> include it into the HTML. Even nicer if You inline it.

To get the arrow to very closely follow the black path try adding: TweenLite.set("#arrow", {transformOrigin:"50% 50%", xPercent:-50, yPercent:-50}); see it: http://codepen.io/GreenSock/pen/Rpmdmv?editors=0010 Unfortunately, I don't have time to wrap my head around the other issues at the moment, but perhaps its enough for you to make some progress or sort out some of the other things. Not so sure how much I can help with that particle emitter.