Leaderboard

You had multiple mistakes, TweenLite was written as Tweenlite Both functions were defined as MoveToRight and typo in list.length as list.lenght Usually these errors can be debugged using developer console. Also, we prefer to get a reduced Codepen demo instead of live sites or git repos. It becomes time consuming to analyze code, reconstruct demos etc

Hi @Carrly You're not seeing a delay in the onComplete, but it may seem that way. The reason is the ease you're using on your opacity animation. Using a Power4.easeOut will make it appear that the animation is finished, but the fade is just going really slowly at the end. To see what I mean please try this small change: //switch this load.to("#preloader", 4, {ease:Power4.easeOut,autoAlpha:0},"-=0.8") //to this load.to("#preloader", 4, {ease:Linear.easeNone,autoAlpha:0},"-=0.8") See the difference? Hopefully that helps. Happy tweening.

Hi @sabird There's nothing special about a view box. It describes what part of the canvas should be visible. Without getting into aspect ratios and the viewport, a view box in canvas could be as simple as this. var viewBox = { x: 0, y: 0, width: 1000, height: 1000 }; context.scale(canvas.width / viewBox.width, canvas.height / viewBox.height); context.translate(-viewBox.x, -viewBox.y); The same animation used in @PointC 's demo. I'm not familiar with AnimateCC, but I know you can do something similar to that using some type of container. If you need help, try to make a simple Create/EaselJS demo on CodePen.

thanks for the demo. You want perspective on the parent CSS is so much fun

In addition to what was said above, do note how Shaun chained the .to() methods; also, the second tween has a relative delay of "-=2" but the first tween has a duration of only 1, so the 2nd tween will actually play first. Might be a bit counter-intuitive and lead to mistakes later on! (This post brought to you by someone who was making a codepen and finished it only to come back to the thread to find all the answers posted already)

Why not just put the header tween in as part of the Timeline with a negative relative offset?

I'm not seeing that error, but there is now a typo on line 85. //switch this el.classlist.remove(n); //to this el.classList.remove(n); Here is your code with that correction. Happy tweening.

I'm still seeing those errors @Sahil listed for you. Once you fix those it should work just fine. It might be easier to create a small demo on CodePen and once you know it's working properly you simply export it. If your local code isn't working correctly you would then have a reference from the CodePen demo so you can compare and find the difference. Happy tweening.

Wow. That's awesome, Sahil. Perhaps this could be used in your next video. Also, those examples from the HTML Animation are awesome. It's like the first year of @OSUblake School in one place and you can save thousands off admission!

Here is how you can do it. I have left some comments in the code but most of the math is self explanatory, you can learn these kind of animations using this book: http://lamberta.github.io/html5-animation For better performance you can use opaque canvas.

haha! after seeing this thread several times I finally decided to give it a go, but just when I was this close to finishing a codepen I had to leave to go see friends, and I spent the night with my fingers crossed that it wouldn't all be for naught! luckily no one showed up with a groundbreaking solution so I am now free to post mine without fear of ridicule. (of course I would still have posted it regardless, haha.) This uses the 'master timeline' approach highlighted earlier in the thread, but it skips a lot of things by assuming that all the steps will be equally spaced which allowed me to just use tl.time() to see what state the animation currently is in. I'm sure it could easily be reproduced with labels and .getLabelTime(), though. Ideally, you would add a delay before resetting the timescale, so that if I press → 0.1s after the animation reached its end it still skips ahead at the same speed instead of reverting to the default. One area where someone more knowledgeable than me could help is, I'm not sure sub.pause().kill(); sub = null; is necessary or if it's overkill when we want to make sure that tween is properly removed from existence. Maybe it'd be possible to use a different method to see if the tween is active and then use something like .updateTo() to change the target state.

If I understand correctly, problem is you are missing target if text gets added while scrollTo is animating, right? You can get around that by recreating tween every time you add new text. Following thread had similar issue, it uses onUpdate call to tween using new target values but if you are not animating height(plus not really good idea for performance) of new text then just updating once should be enough.

A couple quick questions ... by the looks of it, this isn't a continuous scroll, but a scroll to a paragraph as it becomes available via the 0.25 second check. Is that right? Also, what is causing that 0.25 second check to fire every 0.25 seconds? It seems to be that the check for new content should be calculated by predetermined intervals based on the audio playhead position. A codepen would definitely help ... you can simply create an array of a sample of chunks to be brought in dynamically by some check at a regular interval. that way we can see how the Tweens are being applied to the elements or containers.

@Acccent I started posting a few years ago before we had the 'Claimed Topic' feature. I'd make a demo, carefully craft a reply, hit submit and then the page would refresh and all the other answers would be ahead of mine. It was the Wild West of answer battles. Professor @Carl gave me many a smack-down back in those days.

For simple issues such as this, which take a disproportionate amount of time to fix for people who didn't write the code, it can be a good idea to use tools like jslint.com or jshint.com, or any other JS validator, which can help you find the problem yourself.

Ha! I knew @OSUblake would be pulled into this thread. I think he has a 6th sense when the word canvas is mentioned in a topic.

You made only one change from what I had suggested, and you changed all 'TweenLite' to 'Tweenlite'. Write TweenLite on line 19, 32, 47, 61. Correct the typo on line 86 as list.length

Yups so amazing.... Thanks a lot @Sahil... You are the best... @Carl Nice idea!

you were right, the closing transition was occurring after the animation instead of before, and I don't think I would have figured it out if you hadn't said something. Thanks!

Thanks to everyone for your responses, especially OSUBlake! I haven't had the chance to take a deep dive look at it, but anxiously look forward to it!

Yeah - as @Carl mentioned, there isn't a viewBox for canvas. You can certainly zoom and pan all around canvas if you want though. A quick search on CodePen shows a few results. Maybe they'll give you some ideas too. https://codepen.io/search/pens?q=canvas zoom&order=popularity&depth=everything&show_forks=false Happy tweening.

This looks like an issue with a call an event listener in Cordova ... perhaps passing a null event since cordova calls the toLowerCase method within the event listener on the event itself. Look in any event listener and you'll see var e = evt.toLowerCase(); What does your main.js line 149487 look like?

Thanks Carl. I knew it was something basic I had forgotten.

@Acccent haha thanks anyway! Also good point about the tween.

@PointC Ah I didn't know that about the easing, that solves my problem, thanks! @Shaun Gorneau I did try this method first actually, but wanted the onComplete callback for other reasons in my code. But yes, otherwise this is probably the easiest option.

Hi @Stagnax There isn't any 'built-in' function to easily do that. It's a matter of calculating mouse position and setting the eye position and/or rotation. It will also depend on whether you're using SVGs, divs or maybe canvas. There are a whole bunch of different styles and approaches on CodePen that should provide some inspiration for you. https://codepen.io/search/pens/?limit=all&page=1&q=eye+follow Happy tweening.

Thank you so much! I alway have problems with seeing missing letters or other small mistakes. Thank you once again!

Nice work, Acccent. Glad you took on the challenge!

Thanks guys. The solution turned out to be easier than I imagined. My Tween needed autoKill: false. Reading your suggestions reminded me that I was using a plugin, and reading the plugin's documentation was what I needed. TweenMax.killTweensOf(window); TweenMax.to(window, 0.7, {scrollTo: { y: rect.top + window.scrollY - that.headerHeight, autoKill: false }}); I don't know if the .killTweensOf(window) is really needed. I will test that shortly.

Hi Sabrid, Nothing that PointC's viewBox technique can really be applied to canvas as there is no viewBox or anything quite like it. You might want to look into Snap.svg Animator which allows you to export svg animations and art from Animate CC https://exchange.adobe.com/addons/products/12329#.WpghkhMbMUE There is also a video by CJGammon that shows a bit how it works out there as well. Once you export your Animate CC work as SVG then you will probably have some success animating the viewBox. I've never used Snap.svg Animator and it has nothing to do with GreenSock so we don't offer any support on how to set it up and use it but the github repo should have good instructions to get you started.

I checked the demo from the github page and I don't see this behavior while opacity is being animated. My guess is, this library gives you option for that smooth movement after scroll finishes and you probably have used it for opacity or misconfigured somehow or using some callback which is causing this side effect.

I think the issue is that you're tweening the opacity only after the menu has finished growing/shrinking... when you open it, it starts at 0 and then fades in once the menu is completely open; but when you close it, it starts at 1 and will only start fading out once the menu is closed. Additionally, judging by how the values move when monitoring them in the inspector, it looks like for both opening and closing transitions they tween from 0 to 1. Echoing Carl's sentiment though, a reduced example would make it way easier to understand what's going on. I think you should make just one timeline that contains both the size change of the menu and the fade in/out of the li elements. Then you'd be able to play or reverse that timeline when appropriate.

I would suggest you first try to identify what it is your goal is. Animation is a fairly broad topic. For instance in my case I haven't made the leap to very sophisticated OOP or math based animation or canvas stuff. My goal is design and communication oriented, mostly how to create effective pluggable functions and frameworks and trying to create efficient workflows for using basic animation in user interfaces etc... Although that Yeti is some pretty sharp UI work so maybe it's time I upped my game. Others here are interested in more esoteric or creative pursuits, so follow your interest, find examples break them down. If it's GSAP based ask questions here, I think you've probably already experienced the value of this forum. Even if it isn't there's almost always someone to point you in the right direction. Good Luck, and welcome to the forum!

@OSUblake I love these detailed replies from you. If you ever want to compile stuff like this into a guest blog post on greensock.com, we'd be happy to do that. Or a recurring "Blake's tip of the day" Nice work as usual.

Hi @Scarybelles That's a really neat animation! I like your approach to learning. That's kind of how I got started. I rebuilt a pretty complicated project from scratch, adding one line of code at time, making sure I understood what everything did. It took awhile, but it was worth it. Here's the basics of the getCoords function. It starts off by creating a div and span. It copies the text from the input to the div, and copies every single style from the input to div. Basically, it creates a clone of the input, but as a div, and appends it to the body. A dot character "." is added to the span, and the span is appended to the div, so it will be right after the text. It calculates the position of the span, giving you the width of the text. That width is then added to position of the input giving you the coordinates of the caret. From there the function calculates the angle from certain points on the SVG to the coordinates of the caret, which are used to calculate other coordinates that are used in the tweens. And at the very end it removes the div so you don't see it. I modified the animation so you can see what's going on a little better. Creating elements and copying styles is a rather involved approach for getting the width of the text Tip of the Day You can use <canvas> to get the width of text, and it requires no DOM manipulation. var cs = getComputedStyle(email); var context = document.createElement("canvas").getContext("2d"); var spacing = parseFloat(cs.letterSpacing) || 0; context.font = cs.font || [cs.fontStyle, cs.fontVariant, cs.fontWeight, cs.fontSize, cs.fontFamily].join(" "); function getCoords(e) { ... var metrics = context.measureText(email.value); var textWidth = metrics.width + spacing * email.selectionEnd; } For help understanding some of the trig used in the demo. Note that JavaScript math functions use radians instead of degrees. Angle between two points var dx = point2.x - point1.x; var dy = point2.y - point1.y; // Note that dy is the first parameter var angle = Math.atan2(dy, dx); Rotate around point var x = centerX + Math.cos(angle) * radius; var y = centerY + Math.sin(angle) * radius; Distance between two points var dx = point2.x - point1.x; var dy = point2.y - point1.y; var distance = Math.sqrt(dx * dx + dy * dy); Convert radians to degrees and degrees to radians var RAD = Math.PI / 180; var DEG = 180 / Math.PI; var radians = 180 * RAD; // => 3.14 var degrees = 0.7854 * DEG; // => 45 Tween with radians // Just add a _rad string on the end TweenLite.to(foo, 1, { rotation: Math.PI + "_rad" });

Ha - "relatively painless". I guess it's relative indeed. Are you volunteering to convert the docs to Dash's format? I'd be open to sending you uncompiled stuff privately if you're interested.