Leaderboard

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

Oh @Carl you just robbed me of a chance to earn more brownie points... I'm trying to collect enough of them to trade them for a slice of miss Dodi's cake.

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()

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

Hello Carl, i can`t thank you enough. It's so important to get some help in the beginning to stay motivated and not give up. Thanks a lot for your help and time. I really appreciate it.

Nice work Dipscom! A welcome break from minimalist material design. You were lucky to have a client with the vision to get creative.

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

Hey all, It should be no secret that GSAP does a ton of work to get around SVG-related browser bugs and some serious heavy lifting to make working with SVG as similar to DOM/CSS as possible. We did our best to outline these strengths here: http://greensock.com/svg-tips However, the workflow of designing an SVG in Illustrator (or other programs) and getting it to play nice can be a little challenging. Why is illustrator renaming my layers? Why did it put a transform on that thing? Why is this thing a path and not a polyline? And of course the SVG spec in general dictates that some things work differently than we may expect and on top of that each browser has its own special quirks. So if you have a little workflow tip that you think could help others, feel free to post them. I'll leave this post sticky for a week or two and we'll see what we get. If anyone thinks they have enough ammo for a full blog post, feel free to PM me and we can discuss. I'll start by contributing this video by Chris Gannon: in which he discusses creating a rectangle the same size as your artboard for when you copy elements out of AI and paste them into an editor.

They do play together. As it is what my mate uses on his sites WP sites, with GSAP.

According to the transition page on the barba.js site you can create animation based on any library, and quite easily, so GSAP should be a go for sure with this. I'll be very interested to see if you can make workable with WP. Good luck.

Why do you need to do it inside an svg. The animation you are creating can be created regular html elements, it doesn't need to be inside an svg container. At the very least the text doesn't. As noted if you must use svg I think svg text would be much better than injecting html text. Regardless, if you are injecting html text in the svg and you know the size of the svg relative to the dom is consistent. Ie 100% wide, 50% wide etc you could apply font size based on vw viewport width units. You'll also likely have to tinker with the html containers including the size of the foreign object itself , I don't believe the svg will trigger them to resize, they will probably have to have percentage or viewport based sizing which will hopefully be honored within the svg rather than arbitrary pixel based sizing.

Cheers.

Hi @OneManLaptop, Maybe the hints in this topic will help: Best regards Mikel

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.

I would agree with Dipscom that React or a similar framework is best suited for this type of thing. I don't think animating between page linking would get you a smooth solution. It can also be achieved with all the content hardcoded on a single page. I did it this way on this site: http://www.questbrands.ca/betterbarriers Everything is basically handled by GSAP. Note that this way it's very important you devise a workable lazy loading technique so that everything doesn't need to be loaded at once and preferably assets that are never viewed don't get loaded at all. Look into jquery load() as well, very easy content loading solution that might help you progressively build a page. If you've ever used Foundation it also has an AJAX loader called Interchange that is pretty easy to use.

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

When I need to create and tween hundreds of new objects every second, I usually use an object pool so I can reuse them. When respawning, I call invalidate to adjust the start and end values for any tweens that need to be updated. Yes, you sacrifice memory, but performance will usually be better as garbage collection will happen less often.

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!

I just tried that, but I didn't get an error. It sounds like you might be importing TweenMax/gsap somewhere else, which would probably cause a problem as it would be loading it twice.

I'm curious why you'd want to disable that. It's implemented currently so that it maximizes performance. I believe you could tweak it by adjusting the TweenLite.autoSleep value lower. Does that help?

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)

Most of it was straight forward, just had to create draggable slider and do same thing with it as jQuery slider.

I don't know why it happens, but it happens with few other plugins. If you console log DrawSVGPlugin before using it or just execute 'DrawSVGPlugin;' statement, drawSVG works. By executing it maybe just makes those functions available for you to use. But if you import it directly as follows, it works without needing to execute that statement. import "gsap/DrawSVGPlugin";

I was setting something there to test out, and just forgot about removing it. You can replace it with the offset and it will work the same. Sounds like you got it. The params with forEach are in the opposite order of jQuery's each, so index is the 2nd param. And 0 will evaluate as false, so there won't be a pause at the start. To be honest, it wasn't obvious at first where the spaces were even coming from. I couldn't see any spaces when I inspected the elements in my dev tools, so I made a version using canvas just to compare. Then it hit me. I was using " " in my canvas to detect white spaces, so I logged this out. console.log(quote.children[0].childNodes); // [div, text, div, text, div, text, div, text, div, text, div, text, div, text, div, text] Bam! Like I said, whitespaces are usually found in between words. Those whitespaces are text nodes, which won't show up as an element in your dev tools. So to add a delay in between words, we need to start the loop with words instead of chars, and follow this pattern - word > chars from word > whitespace delay > word > chars from word > whitespace delay > word > chars from word > etc. And yes, I would have to agree that there should be an option to have the whitespace wrapped in a div. I can definitely see how it could be useful.