Dipscom

Glad to hear it helped you. Comments on some of the nuggets: >we don't need the version, style, or xml:space attributes in the SVG element You don't in the browser. In other places and circumstances, you do. >I thought clipPathUnits=objectBoundingBox was necessary for the clip-path to scale in relation to the SVG, but now im seeing it as just another way to describe x/y/height/width. its relative either way Lots of SVG properties don't need to be set, their default behaviour covers most cases. SVG will scale nicely the moment you set a viewBox. >didn't know you assign the clip path right inside the svg to the elements you want clipped like that. Much nicer then having to assign it via css Some people would argue assigning it via CSS it a lot better. I guess I just didn't see you had it set via CSS. >xPercent and yPercent is clearly the way to go. I had caught something about it being preferred somewhere but didn't realize yet that it applied to my situation GSAP is full of goodies that makes life so much easier. I'm always finding new stuff. It baffles me the POWERS THAT BE have already thought of so many of those things.

This line: img.setAttribute("src", name + i + ".jpg"); Creates the image node and sets its src to be the "name" you give the function concatenated with the index number of the loop "i" and the extension ".jpg". The resulting HTML tag would be the following for the first element of the array: <img src="img0.jpg" /> As is, it's already creating 30 different images. You will have to remove the "i" from the bit that builds the src name if you want them all to be the same. Bear in mind that this example assumes all your images are on the same level as the document. If you wanted to put them on a different folder, you will have to amend the JS to: img.setAttribute("src", "folderName/" + name + i + ".jpg");

Hi lynette, Thanks for the Pen, it helps. I can see from it that you are using TimelineMax, and that you are basing your file from one of DoubleClick's templates. There's definitely a load of code there that is not needed - Having the simplest possible example helps because we can focus in what really is broken without having to read hundreds of lines. Look at this fork of your pen, you will see how much I have commented out and the majority of the animation still works. http://codepen.io/dipscom/pen/aBwBGB?editors=0011 You will also see that there's no need to put anything other than what goes inside the body tag in your Pen examples. Any JavaScript library you might want to add, like GSAP, can be added via the 'Settings' button. The issue in your case was a CSS position, or the lack of it. You really should set the elements you are animating with either 'absolute' or 'relative' have a look at the CSS tab in the pen and you will see what I have done to quickly fix it. Obviously your truck is not showing because you were loading it via JS but it shouldn't break anything. I hope this helps.

Anything that's repeatable, you can always create a function to do the grunt work for you. Your burden is to create a pattern that will make that easier. As an example: function divBuilder(name, totalElements) { // Create an empty array var array = []; for(var i = 0; i < totalElements; i++) { // Create an image node var img = document.createElement("img"); img.setAttribute("src", name + i + ".jpg"); // Create a div node var div = document.createElement("div"); div.setAttribute("id", name + i); div.appendChild(img); // Always better to use autoAlpha over opacity TweenMax.set(div, {autoAlpha:0}); // Push the div node into an array array.push(div); // Append the div into the body tag document.body.appendChild(div); } // By returning the array, you will have access to all elements in one single variable. This is sugar really, not neded return array; }; // Voila, 30 divs with id and images inside it var thisArray = divBuilder("img", 30); ------ Edited to correct the typo.

Hello Rizzer, Here's the bad news: Currently SVG does not support z-index. The only way to have a SVG element move on top of another is to remove it from the DOM tree and place it back again. And the good news is that there were just a couple of minor things wrong with your setup. 1) There was some sort of conflict in the clipPath name as you had its id as clippath, plus you forgot to assign the clip-path to the elements you wanted clipped. 2) Some of the proportions were wrong with your SVG, sizes and positioning. I did a little bit of a cleanup on it and adjusted the sizes and positions so that it now fits nicely. Check how this fork of your pen differs from your original and you should be able to see what went wrong. http://codepen.io/dipscom/pen/aBwZOL?editors=1010 Happy tweening.

Hey joshscorrar, By golly that's a lot of ifs... I don't know what you are trying to achieve but I did manage to track down where your code is breaking. Thanks for the Pen, it would have been impossible otherwise. You're not targeting the right bits when calling TweenMax: TweenMax.to(eData.targetElm, eData.settings.in.dur, eData.settings.in); // According to your object structure it should be something like the bellow TweenMax.to(eData.targetElm[0], eData.settings.in.dur, eData.settings.in.vars);

Hi lynette, Like shailesh1294p has mentioned, a reduced case example would go a long way to help us troubleshoot your issue. Here's a little video that shows how to setup a CodePen (JSFiddle is also fine, just need to be somewhere we can see everything in context). Without seeing the whole code, it is hard for us to guess what could be going wrong. I can, however show you how I would have set the a timeline that repeats twice. var tl = new TimelineMax({repeat:2}); tl.set(truck, {rotation: 51, x: 118, y: 83}) .from(truck, 2, {x:-150, y:250}) .from(line1, 1.5, {autoAlpha:0}, "-=0.5") .to(line1, 0.5, {autoAlpha:0}) .from(line2, 2.15, {autoAlpha:0}) .to(line2, 0.85, {autoAlpha:0},"leave") .to(truck, 0.75, {autoAlpha: 0},"leave") .from([line3, line4, cta], 4, {autoAlpha:0, ease:Power4.easeOut}, "last") By default, TweenMax includes TimelineLite and TimelineMax, plus a bunch of other goodies that will cover 90% of your needs. Hope this helps.

Thanks for sharing Oomph

Hi sanya.kuzovlev, Welcome to the forums! GSAP is very agnostic and flexible on those terms, I would say you will be fine with any CSS framework that you have a preference for. Just make sure you are not mixing CSS animations/transitions with GSAP tweens.

If you've gone over the basics, now is time to try some experiments. How about you go to CodePen and look at Greensock's draggable examples there. Fork one and see if you can make an element move by dragging a second element.

Nice one gbaciulis, glad you worked it out.

Hello BigZane, Welcome to the forums! Well, that's pretty big project to emulate. My first recommendation would be to take it in steps (although it sounds like you are already trying to cut it into more manageable tasks) rather than trying to replicate everything that you are seeing. That site that you are linking is using GSAP, although I did not spot where the call to the CDN is, or if they are using a CDN or not. I didn't dig into the code. I can tell you that because I have a little browser extension that sniffs out GSAP for me. So, yes, you can create something like that. For the scrolling, you could create a custom handler but the best option, since you're looking to use GSAP anyway, would be to use Draggable and trigger whatever animation you're thinking of when the .onDrag() event fires or upon reaching the bounds of your dragging area. GSAP can animate any numerical property - and some text as well - it's really down to your imagination how you can use that to create different effects. I don't know of any tutorial that's specific for this case but, have you gone over the basics? https://greensock.com/jump-start-js https://greensock.com/get-started-js

Hi nolimit966, Welcome to the forums! That is exactly right, it will take a few milliseconds for the JS to kick in. The best thing you can do is to hide your elements and wait until everything is loaded before showing the content. I personally will hide the whole banner, set the positioning in CSS and do a bunch of .from() tweens to make the elements land in their end position, rather than having to have a .set call for each element. This is a safe way to wait until all elements are loaded, courtesy of our dear and knowledgeable Jonathan: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window, stylesheets, images, links, and other media assets are loaded window.onload = function() { // Your code and/or method calls here }; });

Which ad platform were you using? Have you reached out to them to see if they set the iframe in question to out of focus or something of the sort once it's no longer inside the viewport? That could cause the requestAnimationFrame to drop down to nearly 0 as an optimisation feature.

Well... If I understood it correctly, the effect that is after is something akin to this: http://codepen.io/dipscom/pen/LbWerb?editors=1010 Having the edges morph towards the sides of the circle and the top and bottom of the "eye shape" match the top and bottom of the circle as well. You will see that the circle is not really a circle, I didn't go full on recreating your shapes but it is enough to show the idea. You will also note that if you want that amount of control over the morphing, you will need some good understanding of how these shapes are formed, the order in which each point is created and a general ability to read raw SVG code. MorphSVG plugin does an amazing job but unfortunately it's not magic, it will follow some set rules. In order to create magic, you might have to learn the underpinning of the rules you're trying to bend.

Hi Spoochy, Welcome to the forums. While I can understand what you mean when you say the animation looks weird I am not sure there is anything wrong going on. I am not quite sure what you want to achieve when you say: "even if we assign a top, left and bottom anchor point to it it just takes the default anchor point on the circle" From the what I can see here, the second shape you are using seem to have 5 points to it and a circle is normally made of four points. There's always going to be some wonkiness as GSAP tweens the values of a four points shape into a five points. I think you might have to break your circle down into a raw shape and/or reduce the number of points in the second shape. Another option is to create some intermediate shapes to use in a sequence, that will give you the fine grain control you might be lacking now. You can sequence them up with TimelineLite (or Max).

To me, it sounds like all you need to do is rebuild the timeline on your window.resize. It will overwrite all of the previously created timeline. You wouldn't have to call kill() or do anything fancy since you will be building a new timeline with the same arguments as before but different values. As to a solution for when you already have scrolled down, you can record the progress, save it and jump back to that same point in time after rebuilding the timeline. OSUblake has showed how to in another thread: check it out. And if you find out how to tag people in the forums, let me know as I have no idea and would love to learn it.

Hi daveRAI, I think I understand what you mean by "passing off" the easing from one element to another I can't really visualise the same effect in a rotation animation. Would it not be a case of just timing the start of the second tween into the end of the first tween and adjusting a repeat delay on the first one?

That is absolutely right OSUblake, with the added benefit that my head doesn't hurt when looking at it. I did not, however, spot that he was creating a new variable in the resize.

Thanks for the example pen, made it very clear your intentions. One way is by expanding the callback in your .addPause() like so: // start the video and pauses the timeline timeline.addPause("+=0", function() { video.play(); // Pauses the video after two seconds TweenMax.delayedCall(2, video.pause, null, video); });

Hi twimbee, A .set() method has no duration and is run immediately, I don't know the nitty gritty details but I know .set() methods run as soon as they're invoked, just like a .from() method. There are a couple of ways to go around it. One is to add the delay in the .set() itself: new TimelineMax({delay:2}) .set('.box', {height:50, immediateRender:false}, 'a') .to('.box', 0.5, {height:250}, 'b') ; Another is to turn the immediateRender property to false: new TimelineMax() .set('.box', {height:50}, 'a+=2') // or .set('.box', {height:50}, 2) .to('.box', 0.5, {height:250}, 'b') ; Here's a handy post, with video, that goes in detail about immediateRender. http://greensock.com/immediateRender

That's the crux of the question, really. From the snippet the scope should be there (although you are not declaring var before the timeline) but I can't say for sure. The codePen doesn't need to be a fully fledged thing. The less code to show what you are trying to do, the better. That way we'll be able to spot whatever is wrong with the setup. And if there's no error in the Pen, then, you'll know it works and the bug is somewhere else in your code.

Hi RealMakAttak, Any chance you could put together a reduced case scenario of your intention? It's just very hard to troubleshoot looking at a snippet of code. Also, is there a reason why you are declaring x as a var inside your resize() function?

Open source projects could be an option. I haven't had the need to compress video in a long time so, not much of a help here but I do know that Blender (https://www.blender.org/) has video editing and compositing capabilities. Not sure how good the compression is.

Well, in general is pretty much anything you can imagine. Throw "gsap" in CodePen's search box after you have completed Carl's homework and it will give you an enormous number of examples to look at. Put other keywords to be a bit more specific and have fun