Leaderboard

No problem at all. Glad it's resolved. And I prefer "your majesty".

Holy Cow. Defining xmlns for the xlink totally fixed this. Thank you oh mighty Overlord. I will never forget you.

I'm not an expert on this, but I believe browsers sandbox SVG files for security reasons, so you can't expect them to be able to reach out into the parent document and find other objects (like GSAP). I believe you've got to load the JS into your SVG file, like: <script type="text/javascript" xlink:href="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js" /> (inside the SVG) (and you'll need to load DrawSVGPlugin too of course) Or you could inline GSAP, of course, but that seems kinda wasteful to me. Also, you need to define an xmlns for the xlink in your <svg> tag, like: <svg id="AnimationsContainer" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-250 -250 500 500"> Does that help?

You can use modifiers plugin to calculate values before applying them so your tween will continue playing on resize as if nothing happened. Though if your current tween inside the timeline is not active then you will have to manually set it's position on resize.

Welcome to the forums, @francis789. I noticed several problems: You weren't loading DrawSVGPlugin at all (the codepen-specific one is at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js) You had syntax errors, like you called timeline.on() but I think you meant .to(). You used several set() calls, but with invalid parameters (looks like you put a duration parameter when there's no such thing) You were re-defining a bunch of TimelineMax instances, but adding animations to only one...and using the same values so there wouldn't be any animation after the first one. One of the elements you were animating had visibility:hidden in the CSS, so you'd never see that. Here's a super-simple fork: Does that help?

Thanks Craig! Spent a lot of time trying to make this as smooth as possible and had an almost identical approach for layers and export. Even had some crazy macro for File –-> Export –-> Export As --> then choose ‘Save as type: SVG’ When I discovered presentation attributes things got a lot cleaner... that cls was making me mad Adobe added the assets export panel that makes the process a little better, it exports (or should) a cleaner code for some more complex stuff https://gyazo.com/1fc0451d9022da2e1c377d637e4fcb87 It can be a bit frustrating because the options for the export are hidden, but you just change them once https://gyazo.com/b9b2562d7280039bb66c924b4f23c8e2 Not sure anyone will use this but's also worth to know that you can just select all artwork, ctrl+c and paste it anywhere https://gyazo.com/2f2c653b500d58df5f7caade7e9defc3 (edit: Probably that's the method @OSUblake mentioned ^^') A lot of crap attached to the last one, but it's handy when you just need to check smth simple. Overall, the process is a pain, the assets export sometimes crashes (exports nothing - that can be frustrating if you aren't prepared for it ;D ) - need to restart illustrator after that, not sure if that's only my thing. It still exports junk like some g id="Layer_2" But a huge benefit of it is that you can have multiple SVGs in one document and control, group, change stuff you want to export Happy Exporting

Trick for something like the Slide Boxes example is to break up the image (or container with background-image applied) into subdivisions each with the original image applied as a background with the background positioned to present a seamless (an indiscernible at the start) mosaic. Here is an example I made to show this in a post quite a while back ... the idea could be applied to a greater number of sections both vertically and horizontally (or both). Edit: One thing I forgot to mention ... I made this configurable with html data-attributes. So there is a bit of preTweening logic to get those attribute values and calculate the necessary property values for the tween.

@Visual-Q @Tasty Sites @MindGamer - thanks for jumping in with extra info. It's always good to see other workflows and tips. @Carl - I've tried to submit feature requests for SVG export changes. The feeling I get from Adobe is that their team thinks they know best and they don't pay much attention to user requests in this area. One new feature I've requested in the past is in Beta now - larger anchor points and control handles. Those tiny dots are almost impossible to grab sometimes. I've also requested a visual reference for path direction. Most 3D packages overlay a gradient on splines so you can easily see the direction and flip if necessary. Maybe a hollow dot at one end and filled dot at the other? How freaking hard would that be Adobe? As it is now, you have to add an arrowhead to an AI path to figure out which way it's going. Looks like Adobe may be short on cash though as I just received an email today that my fee is going up a few bucks a month after my next renewal. If anyone does want to submit a feature request or up-vote an existing request, you can do that here: https://illustrator.uservoice.com/

Check the demos in following thread by @OSUblake

Hi Voo, .delay() can be a bit misleading – when you call blue.play().delay(0.5), you set the initial delay for blue to 0.5s. When you call it again later on, you set that initial delay to 0.5s again, which doesn't do anything because it was already set to that value. The reason it doesn't wait again is because .delay() is only for the initial delay, that is the time before the animation plays for the first time. It is not part of the animation itself (which is why it isn't affected by the animation's timeScale). If you reverse the animation and then play it again, it will go to its starting position, but that initial delay is already 'gone'. If you want a tween that always starts after 0.5s, an easy way would be to use the position parameter like this: blue.to('.blue', 1, {x: '500%', ease: Power4.easeIn}, 0.5); If you want to add a waiting period at the end of an animation, you can add an empty tween like this: red.to({}, 0.5, {}); (or add a label) That way, when you reverse the animation, it will first "tween" nothing for 0.5s, then proceed with the tween that comes before that. (PS: this is a very minor thing, but maybe not everyone is a guy here )

This is my workflow as well. Although I do the same thing with Affinity Designer to avoid the Adobe tax. It works perfectly. Grouped layers in Designer get ID'd correctly in the SVG output. Some things don't output well in either Illustrator or Designer though when it comes to SVG output. Layer effects are dicey. Some fill types are quirky. Transform Matrix does odd things. Etc. The trick is to use just simple lines and fills without using more advanced vector features/effects.

My original post was a starting point for you to recreate the slide transition with GSAP. With that, my question would be ... are you looking to learn how to create something like the Box Slide transition or are you looking for someone to create it?

Unfortunately Adobe seems to have fallen into the morass of a big company and beaurocracy. It's no doubt all fractured product teams each trying to protect their own little kingdom. They 've lost much of the agility required to innovate. I had high hopes when they were touting XD that they would come out with a killer app and website design tool. But it's total meh.

Thanks all. This worked for me

Hello and welcome @Musharraf I would love to help you, though I'm not sure what kind of help you need - that's a pretty complex example for a beginner. Please expand so we can help you better a very simple example of looped animation that can work as a preloader. Here you will find some more info and nice comments. https://ihatetomatoes.net/create-custom-preloading-screen/ Preloaders can be very simple and the opposite, just try something small first. If you need some help with learning GSAP, Petr does a nice job Also, https://greensock.com/get-started-js should help you a million Happy Tweening =========================================================================================================================== BTW my question for anyone that can help me find some peace of mind: That (preloaders) topic is something strange, or maybe it's just me, but usually preloaders just fake loading ( do they? ), I'm curious myself is there any secret ultimate answer how to make a preloader that actually displays the whole progress of page loading - like 50% on loader bar is 10 completed requests from 20? Had few attempts to find the answer but deeper I dig the more confused I am. Shouldn't there be some native, obvious solution or we just need to download everything first and then we can fake the loader ;P? Any guidelines will be much appreciated! Cheers

Dear Sahil, Thank you for explaining, you're code was just what i was looking for. Thank you! -Hakiko

@DevSaver We had few questions recently about this similar issue, some of them were caused by local files. And others were because CSS file that applies pseudo elements was being loaded after javascript file. You can see that happening in following demo. If neither solves the issue then we will need more information like, what kind of setup you have, whether you are using latest files and if it happens in all browsers or some specific browsers. A demo would help, if you can't reproduce it on codepen then a link to live site or reduced case demo from your server will be helpful.

The jQuery example I showed in that other thread is probably the simplest solution. Basically you load up an html snippet, and in the callback you animate the old content out, and the new content in. Usually helps if you position the content absolutely inside a container. <main style="position:relative"> <section id="old-content" style="position:absolute">Old Stuff</section> <section id="new-content" style="position:absolute">New Stuff</section> </main> $.get("new-content.html", function(data) { // Add new-content html $("main").append(data); // Out with the old TweenLite.to("#old-content", 1, { autoAlpha: 0, onComplete: function() { $("#old-content").remove(); } }); // In with the new TweenLite.from("#new-content", 1, { autoAlpha: 0 }); });

As far as I can imagine you just need to worry about current content and new content without worrying about other pages. You can write your timelines by using functions and feed your new content to it to perform transitions. Following tutorials show how you can create complex timelines using functions, which you can reuse by passing parameters.

@smallio I removed all GSAP libraries from your demo and it still works as it is, so I am not sure how you used draggable on it plus you are not using draggable library in your demo either. Probably you are confusing flickity's draggable with GSAP. Unfortunately I have never worked with flickity so I can't suggest anything to achieve that effect. Maybe you should try flickity's forum, you will find answers there. If you want to go pure GSAP then you might be able to use and modify following demo.

Well, technically you could just invalidate() the timeline/tween to force it to re-record all the starting/ending values on the next tick, but you could also just create a new tween each time and simplify it like: $(window).on("resize", function() { TweenMax.to(elem, 1, {y:$(window).height() / 100 * 50}); });

For my two cent addition, I'd recommend groups for all your masked and clip-path elements. Even if it's just one element, creating a group and applying the mask or clip-path to the group is a better approach. IMHO Happy tweening.

Always a good idea to check this pinned thread with lots of great tips about working with SVG

Ya what @Carl suggested works in IE9, also you were using really old version of TweenMax.

Maybe try applying your mask to a group <g> and put your <image> in the <g>. Then animate the position of the image. For cases like this I would search CodePen for awhile and try to find an SVG mask demo that works in IE and then try to animate it with TweenMax. I'm really not up to speed on how all the different versions of IE handle masks and that kind of stuff.

Just to clarify what was happening... SVG elements can have transforms applied in 2 completely different ways - via CSS or via the "transform" attribute. In old versions of GSAP (before 1.19.x I believe), GSAP would default to using CSS (inline) for most browsers, but since Firefox had some bugs/quirks with that, we applied them via the transform attribute in that case. However, we later discovered more and more browser differences/quirks with CSS, so we defaulted everything to the "transform" attribute instead (it delivered more predictable results, and it was always baked into the SVG spec, so it seemed safest). You were actually loading 2 completely different versions of TweenMax (1.20.3, then 1.18.0). The old version was loaded last, so it trumped the other. So in Chrome, it was applying transforms via CSS, thus it overruled your class css that you had set up. However, in Firefox, it was being applied via the transform attribute, but you ALSO had that CSS rule applied, thus the browser had TWO completely different values to apply, and it had to decide which to prioritize. Oddly, some browsers prioritize CSS over the transform attribute, others flip that. Annoying, I know. So that's why it started working when you removed the CSS rules - there was no longer a conflict. This is one of the reasons we recommend that folks always apply transform-related values directly via GSAP instead of mixing CSS, GSAP, and the "transform" attribute. If you let GSAP do the heavy lifting for you, it'll deliver better browser compatibility, plus it'll be a bit faster as well. Happy tweening!

Ya I felt so too, it will be a lot easier to get answers if you ask multiple questions one by one.

I'd say there's a question within a question here and therefore two answers. 1) Accessing/Controlling timelines returned from functions. All you're missing is to assign them all into a variable or a master timeline. If you were to do something like: function frame1build(){ var tl = new TimelineMax(); tl.from('#item', 0.7, {animate properties}); return tl; } function frame2build(){var tl = new TimelineMax(); tl.from('#anotherItem', 0.7, {animate properties}); return tl; } function startAd(){ var tl = new TimelineMax({paused: true}); tl.add(frame1build()) .add(frame2build()); } var main_tl = startAd(); // Now you can access all its properties main_tl.play(); 2) Looped timelines within timelines. Now things get a tad funky. Infinitely looping nested timelines/tweens are always problematic if you are not careful. They will create a point in your timeline that has no end. That can cause all sorts of issues when trying to get totalDuration(), progress() and such. Also, trying to play beyond a nested infinite timeline/tween will require a label as its length/duration is infinite. The answer lies on what exactly is it that you are trying to achieve but for the sake of giving you ideas, here's one way you could handle this situation and uses that infinite looping timeline you presented. function loopedAnimation(){ // Let's change this to be paused to begin with var tl = new TimelineMax({repeat: -1, repeatDelay: 1, paused:true}); tl.to('#loopItem', 0.2, {left: '+=10', opacity: 0, ease: Power2.easeIn}, 0.2); return tl; } function frame1build(){ // Get a reference for your looping animation var loop = loopedAnimation(); var tl = new TimelineMax(); tl.from('#anotherItem', 0.7, {animate properties}) .addCallback(loop.play) // WARNING THIS IS WRONG - SEE MY OTHER POST BELLOW // do something else .addCallback(loop.pause) // WARNING THIS IS WRONG - SEE MY OTHER POST BELLOW return tl; }