Leaderboard

Hi and welcome to the GreenSock forums, Don't worry we do the whole "rough" thing here. We'll do our best to help you. I appreciate that you made a demo, but unfortunately I couldn't get it to display anything. Very odd that there are no errors either. We really have to focus our support in helping people understand the GSAP API. Debugging a complex slideshow that doesn't work at all is just a bit beyond what we have the resources to do. It would really help if you could reduce the demo to the bare essentials of just having something basically running that illustrates the issue. I noticed your code looks very similar to that from a tutorial from my friend, Petr Tichy: https://ihatetomatoes.net/greensock-tutorial-create-simple-image-slideshow/ If you are using his demo as a starting point for your project, you might want to leave a comment / question on his blog. Anything you can do to reduce your demo down to something that illustrates the problem with as little code as possible will go a long way in helping us help you. We certainly want to help you understand GSAP, but its pretty hard or us to try to reverse-engineer what looks to be code for a nearly full project.

How wide are your clouds? How wide is the stage? Why is 0 such an awesome number? If a cloud is 200, the stage is 1000, and that cloud is positioned at 0. var tl = new TimelineMax({ repeat: -1 }) .set(cloud, { x: -200 }) .to(cloud, 10, { x: 1000 }) .progress(Math.random()) Here's a hint. Your SVG is 2645.22 wide. <svg viewBox="0 0 2645.22 1529.55"></svg> Now move your clouds to 0, and head on over to this thread.

The code is certainly based on the I Hate Tomatoes tutorial. It seems to take you through the project fairly well I would suggest going through it again to make sure you have implemented it properly and contact author as Carl suggested. FWIW it appears the initial function 'init' looks for any slides that don't have the class 'active' and makes them invisible. At the start none of the slides have this class so they are all made invisible. Try adding class 'active' to first slide in the html on load may fix it. <li class="homeSlide slide01 active">

The only thing I would have done differently is to handle the click inside the createAnimation function. const createAnimation = (element) => { let tween = TweenLite.to(element, 1, { width: 400, backgroundColor: "#673AB7", borderRadius: 0, ease: Elastic.easeOut }).reverse(); element.addEventListener("click", () => tween.reversed(!tween.reversed())); }

I'd just let each element handle the click individually instead of looping through the entire set. And who needs loops when you can when you can emit events. I do that a lot in games.

Hi @Josefina I'd certainly follow @OSUblake's advice. It's a great way to get repeating clouds. That being said, I thought I'd throw my two cents worth out there for you. What you were doing by moving the cloud to x:-2400 can move it off the stage, but then the cloud movement was x:"+=3000". That setup actually only animated to x:600 from its original position (0-2400+3000) which simply wasn't far enough to go beyond the right side. Here's a basic example with the same width as your SVG and a circle path standing in for the cloud. I've set the SVG overflow to visible so you can see where things are landing. You can see that moving it to -2400 does indeed move far enough to the left, but a 3000 unit move is not enough to go off the right side. SVG coordinates can be a bit confusing sometimes so hopefully that helps a bit. As I said, Blake's approach is great and I'd recommend following his advice for some easy repeating clouds. Happy tweening.

Ha ha. Well, the forums are very much alive and kicking...just not quite as much activity in the banner-specific one, that's all. Maybe because when you use GSAP in your banners, things go so smoothly that everybody is happy. No need for questions

It is really easy to convert a CSS animation to GSAP, you just need to copy it mostly as it is. Only difference here is I am setting zIndex using set method. There is some additional code that is required to take care of rapid clicking because you are using button for each image. Take a look at docs in CSSPlugin, it will help you understand CSS animations using GSAP so you can convert easily. https://greensock.com/docs/Plugins/CSSPlugin

Hi guys, This subject might be outdated, but there's definitely a lack of resources for working with GSAP and Angular 4+. After Googling and experimenting for days, here is how I finally got Draggable and ThrowPropsPlugin to work properly: 1) Install GSAP into your project by using NPM in a command line interface in your project folder npm install gsap --save 2) Copy over the files from the "bonus-files-for-npm-users" folder from your Greensock download into /node_modules/gsap folder in your project. (you must be a shockingly green or business green member in order to download files the necessary files) 3) Add the appropriate import statements: import 'gsap/ThrowPropsPlugin'; import * as Draggable from "gsap/Draggable"; 4) Then just verify that it's working. Here, we're making any images draggable: ngOnInit() { //make all images draggable as a test Draggable.create('img', { type:"x/y", throwProps:true }); } Hope that helps others looking to incorporate GSAP with Angular or Webpack.

Everything is settled, no more problems to solve, everyone has his own solution? This forum is cooled down near to absolute zero. This is the only community which gives me some reputation and feedback. Don't let it die! Let us group together and flood the SIZMEK support with questions about their ad size calctulation algorithm. Or hit the bonkheads at Google to properly support SVG! Let's make a guild of bannerers!

Fixing the sidebar should just be a css solution. position:fixed As far as parallax goes, there is more than one way to skin that cat and it will depend a fair bit on your Javascript skills. Scroll Majic and pins are used commonly for this type of thing, for more information you should visit the Scroll Majic site it has some examples. http://scrollmagic.io/examples/index.html Shaun had some very good solutions that are applicable to parallax recently in these posts. In the second @Shaun Gorneau created a script that links tween.progress to scroll position which has great potential for parallax effects and would be very flexible for changing and/or adding your own logic to. var scrollMax = $(document).height() - $(window).height(); $(window).scroll( function(){ var curScroll = $(window).scrollTop(); if( curScroll > 0 ){ rocketTween.progress( curScroll/scrollMax ); } }) If you search the forum I'm sure you'll find more examples.

You'd need to write it like this: .add(clearStage(), 0) .add(cloudsMoving(), 1) .add(enterFloorVegetation(), 0) Right now, you have the label names in the position parameter spot and the 1 and 0 are over in the align spot which only applies in the case of an array. More info about add(). https://greensock.com/docs/TimelineMax/add() You could also add a label and then start the nested timelines at the label like this: .add("someLabel") .add(cloudsMoving(), "someLabel+=1") .add(enterFloorVegetation(), "someLabel") Hopefully that helps. Happy tweening.

Hi Risko, Welcome to the GreenSock forums. Thanks for all the demos. I really liked the Magnetic Goo! one. Very cool. I've read this thread a few times and it looks like some other have as well. I'm kind of struggling with understanding how to help. Its a pretty ambitious effect to take on for someone beginning with GSAP. Quite frankly I'm not so sure I know what a reasonable solution would be given my level of understanding of the question. We really try to keep our support focused on the GSAP API as figuring out advanced like this can be pretty time consuming. it looks like in your yellow example you have a single path. I think it will be fairly complicated to dynamically morph that path in relation to the mouse position. True SVG Goo is created by blurring multiple items and using the right filters. So for each blob of goo, you probably want 2 or 3 circles that stay close to each other as they get pulled towards the mouse https://tympanus.net/Tutorials/SVGLoaderGSAP/index7.html https://codepen.io/chrisgannon/post/how-to-make-an-svg-lava-lamp Here Sahil created demos and a video explaining how to get a grid of shapes to be attracted to the mouse. There are probably some techniques you can use. Unfortunately, I just don't know how best to advise you to make magnetic goo that reacts to mouse movement but hopefully some of these resources help.

A timeline is just a wrapper for tweens (and other timelines), so its duration is always based on its contents. When you alter its duration, it simply alters the timeScale accordingly so that it APPEARS to take that long to play, that's all. Make sense?

I thought I was the only one who keeps waiting for questions. Maybe you can occasionally jump to other side of the forum to get some reputation.

Actually, I managed to figure it out. I tried working it out in the code itself, but the easiest way is to just to target each element through its own class or ID and and run it through each function individually. Since each element will reside in its own array, the reverse / toggle logic will only apply to the element inside that array. Maybe there's a better way (I'm always open to suggestions!), but this will work for my purposes. =)

I fixed it! Just put a "position:fixed" on the transformed (TweenMax) element.

Sir, I really appreciate for your help. It's completely brilliant and motivating me to learn about GSAP further. I will be continuing with my interest using GSAP animation. Thank you once again.

Is there any reason you're not using a timeline for this? TweenLite.defaultEase = Linear.easeNone; var tl = new TimelineMax({repeat:-1}); tl.from(".div1", 0.5, {x:100}); tl.to(".div2", 0.5, {y:100}); tl.from(".div3", 0.5, {scale:2}); tl.from(".div4", 0.5, {rotation:360}); More info: https://greensock.com/docs/TimelineMax Also check out the position parameter: https://greensock.com/position-parameter Happy tweening.

Those circles are like placeholders to all the consonants and rest is vowel. Devanagari works by combining consonant with vowels and creating unique character, if anybody hates spelling in English then you will love it. Looks like perfect idea by @Acccent, you will need to add too many conditions otherwise. This implementation will take care of almost all languages. As for arabic or similar languages (don't have first hand experience with them), they work a lot different at least while typing. Take a look at following video, So with current implementation whatever language it is, if user can split the characters and it makes sense to them then they can use it.

My biggest tips for taming the gremlins that reside in Adobe Illustrator's SVG Export would be convert to compound paths and always include a background rectangle that matches the same dimensions as your master SVG. Take this simple example If we leave them as rectangles, we get this for output: <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 600 300"> <rect width="600" height="300" fill="#000"/> <g id="boxes"> <rect x="100" y="50" width="200" height="200" transform="translate(164.64 -97.49) rotate(45)" fill="#c1272d"/> <rect x="200" y="50" width="200" height="200" transform="translate(193.93 -168.2) rotate(45)" fill="#7ac943"/> <rect x="300" y="50" width="200" height="200" transform="translate(223.22 -238.91) rotate(45)" fill="#3fa9f5"/> </g> </svg> But if we convert them to compound paths, we get this: <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 600 300"> <rect width="600" height="300" fill="#000"/> <g id="boxes"> <path d="M200,291.42,58.58,150,200,8.58,341.42,150Z" fill="#c1272d"/> <path d="M300,291.42,158.58,150,300,8.58,441.42,150Z" fill="#7ac943"/> <path d="M400,291.42,258.58,150,400,8.58,541.42,150Z" fill="#3fa9f5"/> </g> </svg> I always recommend the use of a background rectangle so there are no coordinate surprises. If we remove that rectangle, we get this: <svg xmlns="http://www.w3.org/2000/svg" width="482.84" height="282.84" viewBox="0 0 482.84 282.84"> <g id="boxes"> <path d="M200,291.42,58.58,150,200,8.58,341.42,150Z" transform="translate(-58.58 -8.58)" fill="#c1272d"/> <path d="M300,291.42,158.58,150,300,8.58,441.42,150Z" transform="translate(-58.58 -8.58)" fill="#7ac943"/> <path d="M400,291.42,258.58,150,400,8.58,541.42,150Z" transform="translate(-58.58 -8.58)" fill="#3fa9f5"/> </g> </svg> Even though these are compound paths, we now have transforms on them and our viewBox is not the 600x300 we were working with in AI. I think a lot of people assume the SVG will automatically be the same dimensions as your AI project, but that is not always the case. You can skip the background rectangle and still get the correct size if you choose to export the artboard or assets, but I don't care for that approach because you can't see the code before you export. I also find the code gets a bit more bloated by doing that. One other thing that is available in AI should you be getting some strange coordinates is under the top menu: Object --> Transform --> Reset Bounding Box. For my own personal workflow, I sometimes put all my groups stacked on top of each other at coordinates (0,0). I then use GSAP to move them to their starting positions. Happy tweening.

Hi lwmirkk, Sorry but we really don't have a lot of time to be supporting the old AS3 loader stuff. From looking at your code it looks like you are thinking that the mySwfLoader has a TextField on it called "item1". mySwfLoader.item1.text = 'TEST THIS'; I'm gussing item1 is in the actual swf you loaded so try targeting the rawContent of the SWFLoader like mySwfLoader.rawContent.item1.text = 'TEST THIS'; https://greensock.com/asdocs/com/greensock/loading/core/DisplayObjectLoader.html#rawContent

Hi lwmirkk, Having trouble understanding your reply, but just to be clear, mostly all of our AS3 tools have been converted to JavaScript for HTMl5 projects and are being used on over 3 million sites. So if you need to do scripted animation in JavaScript, you can use all your GreenSock knowledge and get amazing results. If you are asking about another tool that someone else makes for scripted animation for AS3, no, I don't think anyone is investing time or money in that, but I haven't paid attention to the AS3 world for many years.

Sorry, @lwmirkk, I don't entirely understand the question and I can't think of any way that dispose() could be forced to free memory more slowly (that seems quite undesirable actually). Also, for the record, the AS3 tools haven't been actively supported for years but you're totally welcome to use them. Cheers!

Properties that are animatable and non-animatable can be very misleading. Take the order property for example. It's listed as animatable, but only as an integer because you can't have something be in the 1.5 position. Not only that, but it doesn't animate from one position to next. https://developer.mozilla.org/en-US/docs/Web/CSS/order ...or so the CSS experts will tell you. They told me I don't know what I'm talking about, but that's because they don't know the secret sauce. GSAP + relative animation (some might know it as FLIP). I know you said you're green, so this might be somewhat complicated, but you can animate between any CSS based layout, including flex row and column. Flex direction http://codepen.io/osublake/pen/eJGrPN?editors=001 Flex order http://codepen.io/osublake/pen/gaQNLK?editors=001 Flex order again http://codepen.io/osublake/pen/JYwRMa?editors=001 Notice that the code in all three of those examples is almost identical. That's because it works with any CSS based layout.