Leaderboard

@bromel Start with simple question, I am calculating knob so do I still need to calculate range? Or can I use knob's position to update range? Simple right? Good job on getting so far, it looks good.

It's pretty hackish way to do it but this floats content above absolutely then detects document scroll position when last item passes bottom of screen and sets content below it. Kind of horrible the way scrollMajic handled this sort of thing wrapping everything in that container. Note that this will only calculate once and be screwed up if screen is resized. A better way would be to reverse engineer this value and figure out what the height is represented is vh units and set it that way. Since the scrollmajic container is building it's height based elements you set in vh units it should theoretically be consistent when the screen is resized. I'll leave it to you to figure out the math.

This is sooo nice @Jonathan ! It just works perfectly. Thank you for taking the time to help newbies, it's very much appreciated.

Ah, lovely! I don't know if the ModifiersPlugin will do it, but the function-based values surely will. That's a bit new, isn't it? ...I guess more than a year old, based on that post's date... well, I'm glad I learnt about it now, better late than never haha. Thanks!! edit: yep, they totally did. perfect

@Sahil Let me first start by saying a big big thank you for your help on this, I intended to only understand how to get one task completed. In the end I ended up creating something rather special It is by far from perfect and I still have a long way to go, but because of your time, I was able to gain slowly some of my lost skills and figure out a way. I think the last thing for me now, is to get the range and knobs appearing in sync with one another, I was battling this one (my maths is terrible) but I think it's a case of understanding how to deduct the knob value from the container and apply a magic number to it Again any help is always appreciated, tnxs for it all Bromel

You can use the physics plugins like Physics2D and PhysicsProps to create tweens based on friction, acceleration, and gravity https://greensock.com/Physics2DPlugin https://greensock.com/PhysicsPropsPlugin However, if you want to throw an object and have it bounce off of walls and other balls and have its acceleration slowly decay over time, you probably want to look for a physics engine and not a tweening engine. http://heikobehrens.net/misc/box2d.js/examples/

Hi @multivac Let us know how the above codepen helps https://codepen.io/jonathan/pen/jYoaxB

Hello @multivac Is this what you were after? .. i used a staggerFromTo() without using an onUpdate I think the issue was that the browser did not know what the starting filter value was, since by default CSS filter is none. That is why you saw a an abrupt step with no transition from blur to no blur. It was acting like an on / off switch with no interpolation of values. I also added a slight rotation 0.01 and used autoAlpha instead of opacity to make it animate smoother. As well as adding some needed CSS properties to help with cross browser rendering bugs. So now you should see it animate from blur to no blur: JS: var h1 = document.querySelector( "h1" ); var split = new SplitText( h1, { type: "chars" } ); var timeline = new TimelineMax(); // change visibility for initial load TweenMax.set("h1", { visibility:"visible" }); // use satggerFromTo() timeline.staggerFromTo( split.chars, 0.7, { autoAlpha: 0, webKitFilter: "blur(5px)", filter: "blur(5px)", x: 80, rotation: 0.01 },{ autoAlpha: 1, webKitFilter: "blur(0px)", filter: "blur(0px)", x: 0, rotation: 0.01 }, 0.1 ); CSS: h1 { visibility:hidden; } h1 > div { -webkit-backface-visibility:hidden; backface-visibility:hidden; visibility:hidden; } Happy Tweening!

Hi Guys, my Name is Oliver. I am the developer of anivendo. A fast, modern and easy to use HTML5 Banner-Animation-App for Windows (Mac-Version will follow) which uses TWEENMAX. · No Coding Experience required! · NO COMPLICATED TIMELINE! anivendo animates your Banner Creatives very much faster than traditional HTML5 Animation Tools like Google Webdesigner, Adobe Flash, Adobe Animate CC, Adobe Edge Animate, etc… Why don’t you take a Look. We are currently searching for alpha-Tester! https://anivendo.com/ Update (03-23-2018): anivendo is now fully documented! https://anivendo.com/docs/ Questions, Bug Report and Improvement Suggestions can be made via anivendo Community Forum https://anivendo.com/community/ _ Cheers Oliver

What doesn't reverse? Also if you use a .fromTo on your countup, it will always count the same set of numbers by just repeating it without the need to reset any variables.

Hi @TomWWD, Welcome to the GreenSock Forum. It is sufficient if the screenobject is pushed down. Hiding (autoAlpha: 0) is not required (line24). And: I have integrated a "touch screen" (html line52). It irritates - my point of view - if the 'mouseenter' area is larger than the visible object. Happy tweening ... Mikel

Hey anivendo, may I ask what programming language have you chosen to assemble this great tool? It's surely better than Google Web Designer.

Welcome to the NoFreeTimeClub. It isn't the CommaClub... But it has its perks as well. Black bags under the eyes, sore back, grumpiness...

I updated the pen now it detects directly based on final objects bottom position , I should have thought of this the first time around but it was a long day. With this I was able to add window resize handler that will maintain the contents position relative the last item. Appears to work reliably now. UPDATE: this is a prickly one.. so i had to add another line of detection because it could fail to calcualte position on resize if the bottom item was out of view or hadn't yet scrolled passed trigger. It detects it's position relative to window bottom and hides the content until it once again passes trigger point... which then had to be wrapped in a timeout to give Scroll Majic time rebuild it's container first. It was an interesting problem to solve but I think the lesson here is that this could be layed out better. Probably the best way to do this would be to have the slides inside a container with overflow hidden. This would almost certainly break Scroll Majic however and require adjusting the way the scrolling functionality is handled. Alternately the content could reside with the Scroll Majic wrapper as well which is probably the easiest solution but that would mean ScrollMajic has scroll jacked the entire page which may be undesirable. Maybe there's someone here who's more knowledgeable about how to apply Scroll Majic to avoid these pitfalls.

No, I mean when solving the problems, start with simple questions to decide how to approach your problem. It will help you build your logic a lot easier.

@Sahil Sorry for rambling on, so the way you have done it in the codepen above is what I am looking for, which I guess is calculating the knob against the range. So I can apply the same method for my volume control also. many tnxs bromel

Thanks Carl. For this then it might be better to use matter.js then. Was toying around with it, but was hoping I could start to get into GSAP. Im sure I’ll be back soon with regards to swiping down animations. But plenty of examples for that stuff

I feel like this is such a major shift in what GSAP is able to do; it's not really an 'animation' platform anymore, it's more like a 'universal real-time animation and element manipulation platform'. The one problem I have is that I feel the docs could benefit from a revamping now. I've come back to the forums to find the answer to my question above, and I did, but in the process I found out about a bunch of other things that could have made my life easier before, and that are only documented in forum posts or release announcements. (For example, the function-based values are not mentioned in the docs for TweenLite.to, when it feels like an incredibly important thing to know about.) This is not really a criticism or anything, I just feel like right now the thing that GSAP would benefit the most from is not new features or revisions, but rather an improved exposition of its capabilities (again, at this point it's so much more than an animation tool – I could probably make the case for its use as a full-blown HTML game engine) and a reorganisation of the docs to give an immediate idea of all the possibilities (the main page for TweenLite, TimelineLite and their Max counterparts are very long descriptions of their most basic use – and that could be relegated to the corresponding TweenLite.to page). Just my two cents!

Take a look at the ModifiersPlugin: https://greensock.com/1-19-0/

This just blew my mind! RIP free time.

Hi @LachlanTS, Why are you making it so hard for you? SVG text in paths can solve the task. Kind regards Mikel

You, my friend, will need to step into the wonderful and mesmerising world of MATHS. Have a look at this channel by Keith Peters, it will teach you tons about calculating physics-like movement. https://www.youtube.com/user/codingmath

Hey @mdelp, Firstly well done on getting something working with your setup. I am sorry to rain on your parade but I very much doubt you will be able to easily trigger js based animation using Animsition because it is designed to trigger CSS animations. You'll have all sorts of conflicts with both approaches trying to wrestle control of the element you try to animate. Also, to rain even more, you will have to deal with AJAX or the whole page will reload every time you navigate to a different section. You could, hijack the click, run a transition-out before triggering the navigation, load the new page, have the loading animation kick in then run a transition-out to reveal the new content. But as you can see, it's a fiddly process of several steps... And you'll be reloading the whole page rather than just swapping sections of it. I have heard of a JavaScript library specifically for page transitions - I have never used myself so, not vouching for it but it was a colleague who, like yourself builds all his sites off WordPress so, I know they would work together. http://barbajs.org

That seems to be a common problem, but I don't know how to reproduce it. Can you send me a simplified version of your project so I can see what's going on? As an alternative to importing. As you've seen, the whole process can be rather brittle. @GreenSock Did you see this post by @Sahil? It made me realize why people are having trouble importing plugins. The code to activate the plugin never runs! Modules imported with name bindings will not be evaluated if you don't directly access something from that module. I'm guessing this is so optimizations like tree shaking can take place. If you don't use it, you lose it.

It looks like you are just putting the position parameter where the stagger value should go. the stagger methods have a stagger parameter before the position parameter bad tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, "-=1"); good //all emmaPhoto elements animate at the same time 1 second before previous animations end tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, 0, "-=1"); //all emmaPhoto elements play with 0.5 second stagger between them and start 1 second before previous animations end tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, 0.5, "-=1"); TimelineLite staggerTo() docs: https://greensock.com/docs/TimelineLite/staggerTo()

Thought I'd bump this with a partial solution I just used. I figured out a limited but simple way to address whitespace in a typewriter effect. Insert a character (capital I perhaps) where the wordbreak(s) are and wrap it(them) in a span, In css target span and set to {visibility:hidden !important}. Note: because this eliminates the word break(s) it obviously reduces functionality, but if you aren't doing any word based animation and there aren't any linebreaks reflowing text or you can control linebreaks it works well.

Hi @fencepencil, @Carl`s idea with the loop is perfect. Attention: the dots are manually sorted in the SVG! If this is done, the code line 3 (your pen) would be obsolete. Happy pointing ... Mikel

Hi and welcome to the GreenSock forums, jQuery isn't going to work inside Animate CC. jQuery is for working with DOM elements (div, span, img, etc) and Animate is all canvas using the EaselJS library for rendering. The simplest way for constant random motion is to create a function that creates a tween that moves something randomly. When that tween is finished you call the same function again and tell it to move the same thing again to other random coordinates. The code for 2 objects to move randomly and independently looks like this: function moveIt(it) { TweenLite.to(it, (Math.random() * 2) + 0.5, {x:Math.random() * 400, y:Math.random() * 400, onComplete:moveIt, onCompleteParams:[it]}); } moveIt(this.box); moveIt(this.box2); demo: https://greensock.com/forums-support-files/randomMovement/randomMovement.html I have attached a zip of the files. randomMovement.zip

Hi and welcome to the GreenSock forums, Looks like you posted in our archived Flash forums (moving this post to HTML5). No biggie. Thanks for the demo. Very nice. You have some options here. Every animation has a progress() method that you can actually tween. The progress (value between 0 - 1) represents how much of the animation that is complete where 0 = none, 0.5 = half, 1 = fully complete. To tween the progress of a timeline named tl you can do TweenLite.to(tl, 1, {progress:0.5})// animate to a progress of 0.5 Read more about the technique of "tweening a tween" (or timeline) read: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca --- You can also call tweenTo() on a TimelineMax timeline like tl.tweenTo(5) // tweens to 5 seconds. https://greensock.com/docs/TimelineMax/tweenTo I modified your demo to show both techniques. Press the "reset" button after each animation

as far as shortening your code, you can do a lot with loops if you set up your SVG the right way. Here are the elements as they appear in illustrator https://greensock.d.pr/vyLaop Without giving any dots or letters their own unique classes or IDs you can just find the first dot and tell it to morph to the first letter like: var allLetters = $("#letters path") var tl = new TimelineMax({repeat:8, repeatDelay:0.3, yoyo:true}); //animate the first dot to the first letter //animate the second dot to the second letter //animate the third dot to the third letter $("#dots").children().each(function(index, element){ tl.to(element, 1, {morphSVG:allLetters[index]}) }) A setup like that could work for 100 dots and 100 letters with the same 3 lines of code.

Variables aren't scoped in a for loop. https://stackoverflow.com/questions/790558/variable-scope-in-javascript-for-loop That's what the new let and const statements can be used for. So you can either use those (just be sure to use a transpiler like Babel to support older browsers). for(let i = 0; i < 6; i++ ){ ... function getOffsetValues(){ console.log(i); } } Or do everything inside a function. That's what your jQuery each loop is doing. for(var i = 0; i < 6; i++ ){ setChars(i); } function setChars(i) { ... function getOffsetValues() { console.log(i); } }

Hi @fencepencil, Welcome to the GreenSock Forum. You can cut a lot, for example: var dots = [].reverse.call($('.dot')) // order of the dots - this code requires jquery or you the order in your svg waveDots.staggerFromTo(dots,0.8,{y:-7},{y:7, ease: Sine.easeOut,repeat:10, yoyo:true},0.4); When the letter morphing starts, you can use e.g. an 'onStart' (more here) to stop the waveDots animation and set it to progress(0): .to("#dot1", 0.25, {morphSVG:"#f", onStart: stop }) function stop(){ waveDots.stop().progress(0); } I hope this is helpful. Mikel

Hi @simonb, Welcome to the forums! There's going to be no end to talented individuals and agency teams here. You're in for a ride I'm a freelancer myself, based in the UK. Here's some work from last year - you might notice a theme with these as this one client kept me busy for most of the year https://flowers.penhaligons.com/ http://www.penhaligonstimes.co.uk/ http://mysterymansion.penhaligons.com/ - (notice: has music)

Is this what you're looking for?

To add my two cents This is definitely a Firefox OCD thing. Firefox is real strict with SVG elements having CSS display:none property like Jack advised above. Since the Firefox rendering engine will remove anything that has a CSS style of display:none from the rendering tree. See SVG display. if you need to control the display on your SVG elements then use the SVG visibility attribute or its css equivalent visibility: hidden SVG display: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display SVG visibility attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility

Make sure you're not trying to animate (or set) properties on an SVG element that isn't in the DOM yet or has display:none because Firefox burps. That's not a GSAP issue - it's just a Firefox quirk with SVGs.