Leaderboard

Hello Fellow GreenSockers, Well its that time again, The Mighty @Carl has just made and posted another great video tut about: Easy SVG Drag & Drop with GreenSock Draggable Keep in mind if you haven't done already please subscribe to the GreenSock Learning YouTube Channel so you don't miss out on this goodness. https://www.youtube.com/channel/UCFPckx3BFK_GvJag82CjDlg And here are the codepen to boot: Happy Tweening

Hi Prison Mike Just want to point out that DirectionalRotationPlugin is built into TweenMax. TweenMax.to(rectangle, 3, { directionalRotation: { rotation: degToRad(90) + "_ccw", useRadians: true } }) Notice how this pen is only loading TweenMax, PixiPlugin and Pixi (http://prntscr.com/j7byn7)

Hi @ScottJenson There's really no spec for this. The filters in Pixi are shaders, little programs that run on the GPU. The displacement filter is a fragment shader, which runs every pixel through a function to get it's color. That's what gl_FragColor returns. To learn more about shaders, The Book of Shaders is a good place to start. varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; uniform sampler2D uSampler; uniform sampler2D mapSampler; uniform vec4 filterArea; uniform vec4 filterClamp; void main(void) { vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale / filterArea.xy; gl_FragColor = texture2D(uSampler, clamp(vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y), filterClamp.xy, filterClamp.zw)); } The colors used in the displacement map aren't too important. What matters are the channels in the color. In an image, each pixel is an rgba value. In the displacement map, each pixel represents an xy value. A 2D vector. // color channels from 0-255 var color = { r: 100, g: 200, b: 0, a: 255 }; // convert to values from -0.5 to 0.5 var map = { x: (color.r / 255) - 0.5, y: (color.g / 255) - 0.5 }; So the red and green channel are what matters. The red channel is the x displacement, and the green channel is the y displacement. The displacement values will be from -0.5 to 0.5. If the channel is 0, the displacement value will be -0.5. If the channel is 128, the displacement will be 0. If the channel is 255, the displacement value will be 0.5. The filter uses the coordinates of the texture pixel being processed and offsets it by the corresponding displacement and scale value in the map, and returns the color of the texture at those coordinates. So if the red and green channel are both 128, it's going to return the same pixel. It's neutral. If the red channel is less than 128, it's going to return a pixel to the left of it. If the green channel is less than 128, it's going to return a pixel above it. This displacement map will work almost like the one you posted. The gray background has an rgb value of 128, 128, 128. The brownish background in the image you posted has an rgb value of 128, 128, 0. The red and green channels are what matters, so no displacement happens in those areas. Here are some terms worth knowing as they are kind of related. Displacement mapping - https://en.wikipedia.org/wiki/Displacement_mapping Heightmap - https://en.wikipedia.org/wiki/Heightmap Normal mapping - https://en.wikipedia.org/wiki/Normal_mapping A normal map is used for lighting, but it's similar to a displacement map. http://www.falloutsoftware.com/tutorials/gl/normal-map.html https://cpetry.github.io/NormalMap-Online/ This tutorial shows the relationship between a normal map and a displacement map. http://zarria.net/nrmphoto/nrmphoto.html And here's a demo I made for some fabric. You can drag the letter. The displacement map is black and white.

Hi @mary92. I threw together a quick CodePen to demonstrate this without ScrollMagic. I love ScrollMagic, but I try to stay away from it where possible to remove complexities. Because you're dictating user direction and position (within the content), I'm not so sure you need the sauce of ScrollMagic (which fires events at trigger points). Here I demonstrate The parallax effect by manipulating the background position A method to capture scroll direction to dictate which direction to tween to A few notes ... I'm making use of jQuery and a jQuery plugin (jquery-mousewheel) to simplify everything by getting a positive or negative scroll delta to determine direction and to ignore scrolling after the initial detection until the scroll event is done. Here is the CodePen to illustrate. I'm not sure how well it will function embedded here ... you may want to pop out into CodePen itself.

Forget Avengers: Infinity War. This summer’s must-see film is the latest offering from GreenSock Studios. Grab the kids and head to local multiplex for the next showing of ‘Easy SVG Drag and Drop with GreenSock's Draggable’ Academy award winning director Carl Schooff transports the audience into the jungle of SVG with his mastery of the craft. He knows how to get the most from his .icon actors. The fade and scale performances are completely believable and sure to win a multitude of awards. Nice job @Carl I honestly have no idea how someone could watch one of your videos and not immediately start using GSAP after seeing how easy it is to use.

You can calculate snap using a function as in following demo, a lot more flexible when your slides are of same width. Idea is to use a container with width 100%, which becomes your "viewport" for slider. Then calculate width of your slides container by multiplying length and then use snap function to keep track of active slide so you can recalculate slides container on resize.

I'm not familiar with the jquery plugin but you should be able to wrap it in a timeout or find a debouncing function to prevent overscroll. I.e. prevent it from firing more than once per scroll. Shaun would know more about it maybe the plugin has a setting for debouncing?

Seems like you just dropped your animation in there and expected it to render automatically, following are some of the things you need to fix, 1. Your animation is made up of multiple svgs, In @OSUblake's demo he uses single svg as source. 2. All your style must go directly in svg, because in javascript only SVG Markup is getting extracted so canvas is not aware of what is happening inside svg. 3. You are rotating svg element itself but it won't help you, you must animate elements inside svg. Which cause svg markup to change and it gets captured by canvas. Otherwise no animation will get rendered because SVG is not changing from inside. 4. In his javascript he is using animation variable to assign Tween to it so that it can be used to extract frames, in your example you are using animation in different file so you will never get output you want because code is tracking different animation. 5. Your SVG's have different viewbox size, in his example his svg viewbox is 350x350 and canvas is of same dimension so basically your viewbox and canvas should be of same dimension. 6. He is using a white rect as background otherwise canvas will render black background. Following is just tiny bits I edited here and there but you get the idea, http://plnkr.co/edit/Nf7shKxcoonMXsfcBU1Y?p=preview

Great solution, @OSUblake should promote you to Vice President of the 'You May Not Need Scroll Majic' club. Performace is somewhat choppy, at least on my machine almost certainly due to animating the large background images, not the script itself, I'm curious has the community come up with any solutions/best practices for optimizing performance in this kind of situation?

If you need help, post a demo instead of code. It's hard to understand what's going on without one. That's why I'm going to have to take a guess on this one. If something goes crazy when you change tabs and come back, it's probably because you're using setTimeout or setInterval. And I don't know if you should really be using xOrigin and yOrigin like that. Those are used for internal calculations done by GSAP, so they might not be what you expect. For SVG positioning, look at this thread.

Good questions, @Babakness. Your questions aren't annoying at all; in fact, we love folks like you who show so much respect for the licensing terms and aim to honor the work of other developers. You're exactly the type of customer we love to serve. I completely understand your caution too; if costs aren't clear up front, it makes it very difficult to gauge if GSAP's awesomeness is worth building on. Don't worry; we try very hard to be more than fair and always air on the side of generosity with our customers. In 18 years of being in business, we've never sued anyone and our business model is almost entirely based on the honor system. Hopefully our track record proves that GreenSock isn't a scary company to get involved with. Trust is a BIG deal to us. The "Simply Green" and "Shockingly Green" memberships include various bonus plugins but are intended for individuals, thus only the standard license applies. The "Business Green" memberships get the expanded coverage of a commercial license (and all the bonus plugins of course). -- 2 & 4: Your license covers an unlimited number of your Work Products while it’s active. The only other caveat is that it covers your unedited work, meaning that if your clients/customers want to make any changes, they’d need to get their own license. Otherwise, it’d make it easy for a huge company like Microsoft to circumvent the license by hiring a freelancer to start a project and then take it in-house and piggy-back on that single-developer license without getting their own license for their numerous developers. See what I mean? But again, all of the work you do is covered as long as it’s not edited by others outside your organization. If, for example, Company A develops a Work Product that uses TweenMax and sells it to Company B who will be licensing it to end users, Company A should have a “Business Green” membership. Company B would not be required to have a membership. If, however, Company B prefers to maintain a membership instead, that is perfectly acceptable as long as it wouldn’t reduce the club level, meaning if the development company has 20 developers and Company B has 1 developer, it wouldn’t be fair to circumvent the terms by only having Company B get a single developer membership. A 20-developer membership would be required. Again, only one of the companies needs to have the license, not both. -- 3: The ads themselves don't require any special license, no. If the site that's displaying them uses GSAP and it is indeed charging multiple users a fee (in this case, the advertisers) for something related to that product (the site in this case), then yes, technically it'd be appropriate to get the proper "Business Green" license. -- 5: Only if they update GreenSock-related code. In other words, if the "fresh out of college" developers never touch a line of GSAP code, there's no need for that company to get their own license. The original developer's license would cover it. -- 6: Wow, that's a big company! We'd love to have them as a customer (ha ha). You only have to count the number of developers who may interact with GreenSock tools. So in your example, that's only 1 developer, not 50,000. -- So in summary: You only need to count the number of developers who'd interact with GreenSock tools. Your license covers all of your unedited work, even if your clients are reselling it. If your customer wants to make edits themselves, they should get their own license. Our licensing is based on the honor system; we've never sued anyone. No need to be scared that GSAP has a bunch of thorny tentacles that'll invade your work and make things really awkward and expensive. Hopefully our licensing model actually boost your confidence in building on GSAP because it's what has allowed us to continue to innovate and support our products, unlike most other libraries that fade after a matter of months. GSAP is very unique in this regard. Does that help? Don't hesitate to ask if you've got any other questions.

Here is a new pen that does several things ... 1. Takes the background image applied to each <section>, prepends a new set of elements within each section and applies that background to the inner element. The reason it applies to the new inner element is to make it easy to tween the outer element without affecting the inline style of the inner. <div class="background-image-wrapper"><div class="background-image" style="background-image: url(//copied/from/<section>)"></div></div> 2. Now tweens the `y` of each background-image-wrapper (rather than the css image-background) along with a slight tween of the rotation to force hardware acceleration. Side note ... I prefer to Tween elements x/y with background images applied rather than the x/y of an <img> because responsive full-screen (or even just full-width) images are so much easier with css `background: cover`. 3. I've timed the slide tween to be perfectly in sync with the background-image-wrapper tween and increased the image tween distance ... makes for a better parallax effect. 4. Allow for down and right keys to move down the page, up and left key move up the page. 5. isScrolling is now set to `false` when the last Tween has completed. This should offer a better mouse-wheel experience. But ... I'm not sure ... I'm using swipe gestures on a trackpad and an Apple Magic Mouse. Not sure what it's like on a physical wheel without momentum. I've tested in MacOS High Sierra (10.13.4) ... Safari, Chrome, Firefox, and Opera on a 2013 MacBook Air ( i7 1.7Ghz, 8 GB ram, Intel HD Graphics 5000 1536 MB) ... fairly modest specs. The results I see are Safari 11.1 - Buttery smooth with the *occasional* minor snag Chrome 66 - Buttery smooth until it's not :/ It's perfect, then hangs for .5 seconds, then perfect again .. on pretty much each slide transition. No idea why. Opera 52 - Nearly identical to Chrome (to be expected) Firefox 59.0.2 - Holy sh*t! Didn't expect it to be so good ... I usually wrestle with Firefox. It's perfect there ... I just need to do some image preloading.

Woohooo! I'll be right there! Just making popcorn!

Hello @Massimiliano Aprea and welcome to the GreenSock forum! As far as making sure your animations pause when you switch browser tabs. You can always use the HTML5 Visibility API, so when you switch tabs you can trigger a pause on your tween(s) or timeline. And then resume the tween or timeline when you give the active tab focus. Like in this example which pauses the animation when you focus out of a browser tab, and then when you give the tab focus again it will resume the animation. Keep in mind that the example also checks for when browser window is focused in and out since that doesn't use the HTML Visibility API, which only works with browser tabs not un-docked browser windows. Also Like @OSUblake advised we can help you better if you provide a reduced codepen demo example so we can see your code in context in and editable environment. Happy Tweening!

Directional rotation is not built into the plugin. Maybe @GreenSock can add it. You'll have to use it at as separate plugin. tl.to(rectangle, 4, { pixi: { ... }, directionalRotation: { rotation: degToRad(90) + "_cw", useRadians: true } }, 1)

Dear Sahil, I am not a GSAP guru, instead I know the banner area more, with the necessary amount of tweening knowledge to be able to make ads. So I leave the other side for Your expertise to answer questions. Regards

Here's a super simple example: Click anywhere to toggle between a timeScale of 1 and 4. Initially it's got 0.5 seconds inbetween each "frame" (at a timeScale of 1). So jumping to a timeScale of 4 means that there are 0.125 seconds between each one (0.5 / 4). And you don't have to immediately change the timeScale - you can gradually change it by animating it, like: //animates tl.timeScale() to 4 over the course of 1 second TweenMax.to(tl, 1, {timeScale:4}); I hope that helps.

Here's an example of page piling from a previous discussion that uses scroll majic with pins that may help get you started.

Yeah, that's kinda by design because multi-touch typically enables other stuff like pinching/zooming. But to get the behavior you're after, why don't you set allowNativeTouchScrolling:false on your Draggable and then add this: function ignoreEvent(e) { e.preventDefault(); e.stopImmediatePropagation(); if (e.preventManipulation) { e.preventManipulation(); } return false; } document.addEventListener("touchstart", ignoreEvent, false); document.addEventListener("pointerdown", ignoreEvent, false); Does that help?

Hello @mackay2588, and welcome to the GreenSock forum! When i go to your page I got redirected like @Carl did. Thanks @OSUblake for providing the right link. But when i go to the right link I see errors first thing in the browser console. jquery.mobile.js:3337 Uncaught TypeError: Cannot read property 'concat' of undefined at jquery.mobile.js:3337 at jquery.mobile.js:3814 at jquery.mobile.js:22 at jquery.mobile.js:22 jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'top' of undefined TypeError: Cannot read property 'top' of undefined at animateDiv (https://mackay2588.github.io/scripts/randomMove.js:31:33) at HTMLDocument.<anonymous> (https://mackay2588.github.io/scripts/randomMove.js:9:9) at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375) at c (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined jquery.min.js:2 Uncaught TypeError: Cannot read property 'top' of undefined at animateDiv (randomMove.js:31) at HTMLDocument.<anonymous> (randomMove.js:9) at l (jquery.min.js:2) at c (jquery.min.js:2) dbLogoB&W.png:1 GET https://mackay2588.github.io/dbLogoB&W.png 404 () You might want to also handle those console errors. But like Blake advised above you might want to use x (translateY) instead of using top. And reduce the amount of animated elements. I have also seen with that particles.js library being a great resource hog, especially on mobile draining my battery. Just my two cents

Oh... I have to disagree with @Sahil. You don't want to wander over to the other side of the forum. It's Thunderdome over there. @Sahil is a force to be reckoned with as he charges towards a membership in Comma Club.

Has anyone else noticed performance issues with these browsers? Scrolling and changing tabs has been really slow for me, and I've been going insane the past couple of weeks trying to figure out the problem.

Thank you for taking the time to show me these errors. Silly me thinking I could just drop it in and go. I'll go over your notes and make another go at it. Really appreciate the help!!

Yeah ... the performance is certainly choppy because of the big backgrounds. I didn't do my "preferred" method of manipulating the dom to create new element and applying the background image and then tweening that element's Y position. As a matter of fact ... I'll fork it and do that.

Well I don't consider myself GSAP guru either, there are some easy questions that you might enjoy answering. Plus if you really really want people to post questions about banner ads and sizmek, maybe write couple of introductory posts in main forum? I might never do banner ads but I am always curious to know little bit of everything. Some new users might take interest and join you on Banner Animation forum.

I've read a lot of articles on why ES6 classes are bad, and I can summarize every single one of them. Classes are bad, classical inheritance is bad, functional programming is good. It's all opinions. I'm not saying there's no merit to their claims, but there are no technical reasons for why classes are bad. But here's the thing about classes, what they do isn't new. It's mostly just syntactic sugar for constructor functions. https://hacks.mozilla.org/2015/07/es6-in-depth-classes/ I personally use classes all the time. The biggest argument against using classes is one of the reasons why I like using them, classical inheritance, creating a class from another class. The people that wrote those articles would consider my CustomSprite class bad, but they would be OK with my CustomElement class. They're essentially doing the same thing. See how to create a custom element. You need to use a class. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements // Inherits from PIXI.Sprite class CustomSprite extends PIXI.Sprite { constructor() { super(); } customMethod() { } } // Inherits from HTMLElement class CustomElement extends HTMLElement { constructor() { super(); } customMethod() { } }

Well, it doesn't matter anymore. You can do this now with the CustomEase. https://greensock.com/docs/Easing/CustomEase

@Shaun Gorneau your example is amazing for what I need now, thank you for an effort! You all are great, I already love gsap community. I'm gonna get through your code carefully as soon as possible and return with an answer. Thank you again <3

Hm, I don't know why that would happen, it works fine on my computer. It might come from the fact that you're using deprecated events – you should use 'wheel': $window.on("wheel", stipple(onMouseWheel, {delay: 0.2, leading: true})); function onMouseWheel(event) { if(event.originalEvent.deltaY < 0) { // go up (or down, I can't recall) } else { // go the other way } } More info here: https://developer.mozilla.org/en-US/docs/Web/Events/wheel (that page also provides a convenient polyfill for older browsers)

Hi and welcome to the GreenSock forums. Yeah, it looks like you just need to give your logo element a css position value. It's just a css requirement that you can't change the left or top of something unless it has position set to relative, absolute or fixed. try: .logo { position:absolute; } We tried to make note of this in the video but it can be missed: https://greensock.d.pr/OssUPB In most cases its better to animate transforms (x/y) instead of position (left/top). Hope this helps. Let us know if you hit any more bumps in the road. We're happy to help. Carl ps. Definitely check out this thread on using CodePen its a great way to learn GSAP and makes it super easy for us to help you

Hi and welcome to GSAP A few quick issues I noticed before getting into how you can use GSAP to accomplish what you described. You should omit the opening/closing <html>, entire <head>, and opening closing <body> from your CodePen. CodePen basically is setup in a such a way to assume all the html you provide is within the <body></body>. You did a good job of including your scripts through CodePen's settings and providing the necessary CSS within the editor. You also included duplicate code blocks within your Javascript ... everything within and including $(document).ready(function() { ... } OK, with all that said, I've forked your pen and modified a few key things. Namely, removing the use of Timelines and using TweenMax in the over/out functions. Another key thing is that var $items = $('.content-text span'); as a selector is targeting all of those elements (within the hovered tile and all other tiles) at once. You only want to target those elements within a tile being hovered/unhovered (over or out). So I moved that selector to be within the scope of the tile being over/out Example function over(){ $items = $(this).find('.content-text span'); //<-- $(this) being the hovered TweenMax.staggerTo($items, 0.4, { y: 0, autoAlpha: 1, ease: Power4.easeInOut }, 0.1); } You'll notice that the initial hover is not moving the items from a lower position up. That's because the hover function has them resting at y:0 and the out has them moving down to y:20. So only after `out` runs on each tile will they be in a position to "move" up to y:0. There are a few ways to tackle that, but I went for a simple one ... simply set all to y:20 on page load. TweenMax.set( $('.content-text span') , {y:20} ); Now the initial hover Tweens them up to y:0. Here is a CodePen showing it all in action Happy Tweening!

I'm seeing some weirdness lately. I can confirm that Chrome 66 stutter that @Shaun Gorneau mentioned too.

Thank you Sahil.

This is an amazingly helpful answer. Well beyond the call. Thank you!

I'm glad it helped! Feel free to post any questions. I tried to keep it simple to show the key components at work ... but that doesn't mean it's clear! Both = ScrollMagic

Ahh!!! Thanks a lot!! This helps a ton...

Sure, As You can see we are able to add function calls to the timeline at any point in time. .add( function() { if ( !loop ) { tl.stop() } } ) With this You can count the loops or stop the timeline at any point if the number of the loop is the desired. Check out the docs for more timeline control methods: https://greensock.com/docs/TimelineMax

Thank you all for the feedback. I removed particles.js and everything else is running much smoother.

Here's are some tutorials from from Peter Tichy that will walk you through basic Scroll Majic use including a parallax tutorial that should get you pointed in the right direction and help you determine if Scroll Majic is the tool for you. https://ihatetomatoes.net/product/scrollmagic-101/?utm_source=GW&utm_medium=banner&utm_campaign=S101 banner demo

It's a bit hard to tell what you are trying to achieve. The example you show is a nicely functioning slider but doesn't really indicate what you are trying to achieve with respect to parallax. By smooth parallax do you mean you don't want a slide to slide transition and want to scroll the DOM as normal with animations occurring during scrolling or do you want slide to slide scrolling as you have now with animation occurring inside the bounds of the slides? If you're not sure of the type of effect you want perhaps search parallax scrolling websites on google or codepen to find something you like. Perhaps then we could offer some more specific advice. Maybe someone else here can chime in with some examples?

If you want to show a sequence of images that are the frames of a video, maybe it would be worthwhile to investigate simply animating the video position:

Welcome to the forum @thedurf18! A few quick questions ... Is this series of images supposed to produce an animation effect? Or is it more a "slideshow" of images? What is the approximate minimum and maximum frequency that you envision these images changing? (i.e. 1 image per second, 10 images per second, etc.) Are these hard cuts from one image to the other ... or should there be any transition between the images (e.g. a cross fade)? How many images in total?

Hi @SimonDucak Looks like you just missed the ThrowProps plugin in your demo. Here's the CodePen version: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js Happy tweening.

Hi @Chelsea and welcome to the GSAP forums! A few things I would do in this case. First, I would use a Tween to position the playhead by frequently polling the audio's currentTime/duration by using setInterval, clearing the interval onPress and recreating onRelease (in addition to the audio controls that happens in those events). I prefer an interval to an audio ontimeupdate event because ontimeupdate's frequency is all over the map. That way it's a simple positioning (as a % or the overall scrubbers width) vs modifying a timeline's playhead (i.e. progress) in parallel. That way you can remove all your timeline stuff and use a simple Tween with the setInterval. Hope this helps!

The only jQuery I see is the button handlers ... $('#someButton').click( function(){ ... }); You can swap that out for plain JS like so someButton = document.getElementById( 'someButton' ); someButton.addEventListener( 'click', someFunction ); function someFunction(){ // Do some things }

Tough to see what is happening here with just a few lines of code ... if possible, a CodePen would give us a better opportunity to help. But, I suspect your issue is due to translating the `X` value vs changing the `left` value. The tween is affecting `x`, so the style.left property will remain unchanged. So we have to get its translated value relative to its initial offset.

Hi @dimka Welcome to the forum. It looks like you're trying to create a timeline, but your pen isn't loading TimelineLite or TimelineMax. It's usually easiest to load TweenMax which includes the following by default: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack Here's a fork of your pen with that change. Hopefully that helps. Happy tweening.

Gotcha. I wasn't sure if you wanted to target single and multiple elements, so that's why I brought up the event emitter. It's a great way to keep things decoupled. That's actually how reactive libraries like React, Vue, Angular and RxJS work, although they call it a observer/observable. A silly event emitter demo I made for another thread. 45 different input ranges are being driven by animating a simple object.

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.

If you can convert your animations into a transparent png sequence - like img0001.png, img0002.png, etc. - you can use FFMPEG to overlay the image sequence onto your video. That's how I've been doing it. FFMPEG can use an image sequence as a single input parameter. https://en.wikibooks.org/wiki/FFMPEG_An_Intermediate_Guide/image_sequence