Leaderboard

Hi @Tompy and welcome to GSAP There are a few things going that may be the issue, depending on my understanding of the issue your having and the desired outcome you want. If you want the labels "NUMBER1", "NUMBER2", etc. to only appear on a click of "back", or "next" ... here are some fixes. 1. Your javascript uses var back = document.getElementById("back"); var forward = document.getElementById("forward"); But your HTML had no id's on those elements. 2. Your looping because your Timeline's are set to call() the next/previous timeline setup which in turn are free to play through and make the next call() 3. Your onclick handlers had an issue (noted in the JS comments) 4. In previous() your --index logic was looking to see if index was less than the length of the array ( should be greater than -1 ) And I just made a quick assumption that you would like "NUMBER1" to run through on page load (I could be wrong there)

Good question. The myRect object I created cannot be reused like that. You can make a function that returns a simple object like that i.e. a factory function. To use "new" you have to call a constructor function or a class, which is what I used in my second demo. They both do the same thing, but a class is a little cleaner, and newer, so you have to use babel if you want to support IE. The book that you bought is old, so you'll mostly see constructor functions being used, like this ball class in chapter 6. https://github.com/lamberta/html5-animation/blob/master/examples/ch06/classes/ball.js Here's a demo where I use all 3 methods, classes, constructor functions, and factory functions.

Sure, no problem. Check out this edit and look at the next() and previous() functions ... you'll see how we're looping around there. Happy tweening

I've been following this thread in the background. So impressed by all the thoughtful and detailed answers the moderators have provided. However, what's even better is seeing the initiative @cgorton is taking to to study, practice and learn! So often people drop in here when they hit a snag just wanting us to provide a quick "copy and paste" solution that will hold them over until they hit the next problem... only to return again. Cgorton, I know many people appreciate the help the mods give them, but its extra special when we see the people we are trying to help APPLY what they've learned, take it one step further and continue to learn new things. Thanks for taking the time to share what you've learned along the way. Its really cool to see the progress and I know it means a lot to the mods to know their time is appreciated and being put to good use.

Here is basic demo of how you can do that effect. You need a fixed element that will cover all the page content. As for explanation, everything is pretty well documented there. http://barbajs.org/how-it-works.html

Hi @cgorton How are you making out? I didn't recognize you without a avatar. Learning the basics of canvas isn't that hard. Instead of declaring what you want the browser to display with CSS and markup, you write instructions to draw stuff. It works a lot like Logo programming (turtle graphics), which is a programming language for children. You tell the turtle where to go with very simple instructions/commands. With canvas, the context is the turtle, and that's the only thing you can really interface with. https://turtleacademy.com/lessons/en Having only 1 object to work with can be quite limiting, so the solution it to create your objects to work on. If you had some CSS and an SVG... <svg> <style> #rect { fill: #2196F3; fill-opacity: 0.5; stroke: #111; stroke-width: 2; } </style> <rect id="rect" x="20" y="100" width="200" height="150" /> </svg> ... it could be represented as a simple object like this. var myRect = { x: 20, y: 100, width: 200, height: 150, fill: "#2196F3", fillOpacity: 0.5, stroke: "#111", strokeWidth: 2 }; Now you can tween that object as if it were an a real element. If it's a number, GSAP can animate it. The properties you use and how you name them is entirely up to you. The context has no concept of your objects, so do what makes the most sense. You can also make optimizations by reusing objects. Notice how the line has 3 different strokes applied to it. With SVG, that would require 3 different elements. The only way to end a path is to call context.beginPath(), so you can keep applying different styles to the same path. If you haven't already, check out these threads. CSS tricks. It's a little advanced, but it shows some nice rendering techniques. https://css-tricks.com/using-gsap-animate-game-ui-canvas/ I would also recommend going through every property and method on MDN. It's very helpful, and most of the pages have demos. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D MDN also has some pretty good tutorials. Some of the stuff is dated, but it's fine if you're just getting started. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

Whew! I was starting to get concerned about @OSUblake. I thought the word 'canvas' in the thread title made Blake appear instantly and this one has been up for over 24 hours. Great stuff Blake.

Here are some variations. Feel free to experiment

You can have anything you like follow the path as it draws. Here's an example: Is that what you meant? Happy tweeing.

This should get you started. Happy tweening.

Hi @codekai98 and welcome to GSAP! Here is a pen I threw together to help someone with a similar question a few months back ... it may be helpful to you too. It tackles a few things you mention in your post Navigating between slides (scroll and keyboard arrows) Tweening child elements when reaching a slide Avoiding ScrollMagic Hope this helps!

Absolutely. Here is an edit with onmouseover to tween the opacity. onmouseout, on the other hand, is not tweening out because of what i suspect to be some interfering CSS. There are a lot of display, opacity, and visibility declarations making that a bit cumbersone to pinpoint. I also removed "transition: all .4s" ... making the follow much more snappy.

Be careful @cgorton. This is how it starts. You post a few questions. You help a few other members. You start spending more time on the forum. Before you know it, you're suffering from GreenSock Fever. The only known cure is a promotion to Moderator, but then you spend even more time here. ?

@DD77 Sorry, I saw something completely differently after my first post and am making some edits now that may help. Will post back soon.

Thanks @OSUblake. That was really helpful. I was finally able to get a working prototype for an animation at work thanks to these examples. Still playing around to get exactly what I want but this was so helpful. I didn't know es6 had classes... that makes things easier

I'm not exactly sure what you need. It really helps to provide a reduced test case. If you want an animation to run different every time, I'd probably suggest a function that repeats a new tween for you like this:

It is not really GSAP vs Pixi JS. They work together. Pixi JS will render everything to canvas. GSAP will handle the animation for you. GSAP animates any numerical values of objects so it works with PIXI JS really well. Some of properties of Pixi JS are under multiple objects like, pixiObject.scale.x so pixiPlugin simplifies your syntax. https://greensock.com/docs/Plugins/PixiPlugin There are some other plugins that will make your life easier. https://greensock.com/docs/Plugins/DirectionalRotationPlugin https://greensock.com/docs/Plugins/Physics2DPlugin https://greensock.com/docs/Plugins/PhysicsPropsPlugin Here is basic example of how you can use GSAP to animate PIXI objects. If your confusion was if you should use HTML or Pixi JS then, Pixi JS is ideal for game development.

Oh I noticed it yesterday, but I was out for most of the day. It's hard making a demo on a phone. ?

just amazed!

Thank you so much really appreciate it.

To get the timeline to play(), you need to add an event listener to your new text menu button. By setting the height of the nav to auto instead of 100% you can hide it up top. (You could also use 450px in this case.) You could add the new text button to the nav and it would go along for the ride. Or you could add a tween that moves that new button 450px at the same time as the main nav. Adding a tween to the exit animation will take that menu button back to the top. Keep in mind though that you're setting the autoAlpha of everything to 0 in your exitAnim so if a user closes the menu without clicking a link, the menu will not work correctly the second time they click the menu button because everything is hidden. You'll have to decide what to do about that. You could move the menu back up to y:-450 at the end of the exit timeline and set the autoAlpha back to 1. Or you could use fromTo() tweens. Or you could set the autoAlpha at the beginning of the entry timeline. You'll also have to tween your new button when someone clicks a link. Hopefully that helps. Happy tweening.

The problem with the original pen is that the CSS had the element positions fixed with some absolute offsets and some relatively positioned parents and then some calculations being made to dynamically affect the style.top and style.left. That's a lot to deal with! So, I find it easier to relatively/absolutely position the "hot-spots" and then position the tooltips absolutely within those parents at some "home" position. That could be 0 0 ... but in this case we don't want the text to overlap the hotspot by default, so I opted for 40px 40px. Now, that gets the initial position of the tooltips in place out of the gates ... not need for javascript at this point (which is good for graceful degradation). Now all we want to do is move the tooltip a small amount relative to the cursors position over the hotspot ... and we have a really good way to handle that with little calculation: the x/y position of the cursor minus the left/top position of the hotspot +/- some spacing (to your preference) and then use transform: translate(x,y) to move that small amount relative to its current position.

Hi, One way to do that is to use canvas... https://jakearchibald.com/scratch/alphavid/ fred

Well you will certainly get better performance compared to DOM elements because you would be writing minimal code that draws directly and skips any DOM API calls. If your game has a lot of effects or particles, PIXI JS might give you better performance because WebGL takes advantage of hardware accelaration. Otherwise canvas is your best option. If you really want to squeeze out performance then you can avoid rendering text on each frame and render text to offscreen canvas once to reuse it as image for far better performance because rendering text on canvas is expensive. In fact, you can do that for any complex shapes to avoid redrawing them and use sprites wherever possible. Check out following article, https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas And our discussion about canvas performance,

Hi @cgorton After chatting with you via Twitter it's good to see you posting in the forum. I tweeted that book at you 10 days ago and you still haven't ordered it? @Sahil gave you some good info there. He's a master of the canvas. Via Twitter I recall Jack mentioning Pixi.js to you too. If that's of interest to you, here's a quick example of creating some rectangles with Pixi and pushing them into an array. You can then stagger all the properties you like. Pixi is fairly easy to use and GreenSock has a terrific Pixi plugin: https://greensock.com/?product-plugin=js-pixiplugin Lots of cool stuff happening with Pixi right now with the release of version 5. http://www.pixijs.com/ Hopefully that gives you some ideas. Happy tweening.

Just to confirm what @OSUblake has already figure out: The data() object in Vue is for reactive data, not to store any static values. You can do exactly what he has sugested and just add any static values to the this of the component you are working with, you will be able to access it from anywhere in that component's instance. However, I am assuming you are working with DOM elements, don't initialize your timelines in the created() hook. Use the mounted() as you will not have access to the DOM in the created() call. Vue has some bluit-in $options property that you might want to use depending on your case. I haven't seen the real need for it and it does make it ever so longer to reach anything this.$options.customOption but it's there. I guess in a big enough project it would be handy. You might even want to consider not putting your timeline methods inside the methods property. You can, depending on when you need to build your timelines just attach them to normal properties of you component's instance. export default { mounted() { this.someAnimation = function() { const childTimeline = new TimelineMax(); //... return childTimeline; } this.mainTimeline = new TimelineMax(); this.mainTimline.add(this.someAnimation()); } }

TimelineMax already includes a repeat function. https://greensock.com/docs/TimelineMax/repeat

I'm not sure what the question is here. Are you asking how to repeat a TimelineLite? If that's what you need, please try this: var Tween = new TimelineLite({ onComplete: function() { this.restart(); } }); Hopefully that helps. Happy tweening.

Them children...

I posted a link to their demo in that thread. It uses canvas, and looks pretty advanced. http://codepen.io/waaark/pen/ENRvvq?editors=0010

if your using autoAlpha then all you have to do is add the CSS property visibility:hidden on the element in your stylesheet.

Hello friendlygiraffe, This is not a autoAlpha GSAP thing! This is caused due to the CSS stacking context Carl described above! Since the browser will place transforms and opacity on their own rendering layer. Giving them a new stacking context, and overrides the order of your HTML when using CSS position offsets. The order of the HTML is already ok, By you adding the z-index you are changing the stacking context. And that can get hairy since your applying opacity on an statically positioned element #endbox which gives it a stacking context, and that will interfere with the stacking context you already have on its child .cta a. You need to make #endbox have the same z-index as its child .ctx a: As a rule of thumb any time you use CSS position offsets like position absolute. You should always have a parent element with position relative. This way your absolutely positioned element will be positioned relative to their parent. Helping with cross browser positioning of CSS #endbox { position:relative; z-index:1001; /* #endbox gets same z-index as its child .ctx a */ } So technically you can remove all z-index from your CSS, and see that the .cta a button stays on top. Stacking without z-index: You also don't need to have a z-index on your .cta a:hover CSS rule since the z-index will be inherited from .cta a. Also since you are using an <a> tag, as a button. You should always add the display property display: block. Even if defining a width and height. That just helps with cross browser issues. Since by default, <a> tags have a default display of inline. Resources: Understanding CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index Stacking without z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index Happy Tweening!

I see what you mean. The behavior you're describing wouldn't technically be an "onReverseStart" because in GSAP, "reverse" means something very particular - it's the orientation of the tween/timeline in the context of its parent timeline. So, for example, imagine the parent timeline's playhead moving forward across where this particular tween resides - if the tween is reversed, it will play in the opposite direction as the parent playhead moves forward. And remember that you can also reverse() that parent timeline, so a reversed tween inside a reversed timeline will appear to play forward even though technically its "reversed" value is true. The behavior you're describing is attempting to discern when the local direction of the playhead changes, and you can accomplish that with an onUpdate like this: var tl = new TimelineLite({onUpdate:checkDirection}); var lastTime = 0; var forward = true; tl.to(...); //add your tweens or whatever function checkDirection() { var newTime = tl.time(); if ((forward && newTime < lastTime) || (!forward && newTime > lastTime)) { forward = !forward; console.log("changed direction"); if (!forward) { onReverseStart(); } } lastTime = newTime; } function onReverseStart() { //do stuff } The concept is just to check the time and compare it to the last recorded time - that tells you the local direction of the playhead. When you sense a change, you can call your function or run whatever logic you want. Does that help?