Popular Content

Showing most liked content since 04/13/2018 in Posts

  1. 7 points
    Okay, I just re-read your question and I think I understand what you'd like to happen. Since you're a Club member, you have access to CustomBounce and CustomWiggle: https://greensock.com/wiggle-bounce Using that, you could easily wiggle an element and have another element drop from it. Here's a quick demo with a couple basic divs. Hopefully that points you in the right direction. Happy tweening.
  2. 6 points
    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.
  3. 6 points
    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
  4. 6 points
    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
  5. 6 points
    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.
  6. 6 points
    Hi miks, you probably need a debounced function for this – a function that only activates once if it keeps getting called without a minimum time passed between two calls. https://css-tricks.com/debouncing-throttling-explained-examples/ You can either make one yourself, or use one that comes with lodash or underscore.js, or use this one that uses GSAP behind the scenes (and which I made): https://codepen.io/Acccent/pen/OQxjOx If you do use that one, you can do so like this: $window.on("mousewheel DOMMouseScroll", stipple(<your call>, {delay: x, leading: true})); (delay is the time that needs to pass without any scroll events before a next call can happen.)
  7. 6 points
    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">
  8. 6 points
    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.
  9. 5 points
    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)
  10. 5 points
    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.
  11. 5 points
    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.
  12. 5 points
    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!
  13. 5 points
    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!
  14. 5 points
    I prefer Draggable for that type of control. Something like this: Hopefully that helps. Happy tweening.
  15. 5 points
    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 }
  16. 5 points
    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.
  17. 5 points
    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.
  18. 5 points
    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.
  19. 5 points
    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
  20. 5 points
    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.
  21. 5 points
    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.
  22. 5 points
    Sounds reasonable. Are you using a retina display? You might be running out GPU memory. Turn on the FPS meter in the Rendering tab in Chrome/Opera dev tools, and see if you notice a huge spike in the GPU Memory during that part.
  23. 5 points
    Pretty hard to tell from the description whether it's a problem with the code or you're overloading Chrome momentarily as Jack suggested. I'm curious does the subsequent animation on the offending images execute properly. Are these images within the viewport or likely to be during the initial animation that you are having difficulty with, if not perhaps you could defer loading them until after the animation is complete, or make them invisible so the browser doesn't have to calculate their appearance immediately.
  24. 5 points
    Hi @ztartennery, We can't see the code used in the IHT course without getting a membership. I'm not suuuper familiar with ScrollMagic, but without seeing the code I would guess maybe you need to make the timeline paused when you create it? Something like this: var parallaxTL = new TimelineMax({paused: true});
  25. 4 points
    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.
  26. 4 points
    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.
  27. 4 points
    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?
  28. 4 points
    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
  29. 4 points
    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?
  30. 4 points
    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.
  31. 4 points
    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.
  32. 4 points
    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.
  33. 4 points
    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)
  34. 4 points
    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
  35. 4 points
    https://mackay2588.github.io/ https://github.com/mackay2588/mackay2588.github.io Minor problem only in Chrome? Edge is using over 40% of a GPU just sitting there, and that is on a gaming PC. You simply have too many animations going on, and animating "left" instead of "x" only makes it worse.
  36. 4 points
    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.
  37. 4 points
    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.
  38. 4 points
    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.
  39. 4 points
    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())); }
  40. 4 points
    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.
  41. 4 points
    Hi @pikemilsner Welcome to the forum and thanks for joining Club GreenSock. We've had several discussions about modals that I think can guide you on your project. Here's a recent one from @Sahil This thread is about hero transitions and making a div go full screen, but should give you some ideas. @OSUblake drops some awesome knowledge. You can also search the forum for modals and should find several threads with many ideas. Hopefully that gets you started. Happy tweening and welcome aboard.
  42. 4 points
    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.
  43. 4 points
    I'd bet you're missing the GSAP plugin which allows ScrollMagic to hijack the tweens. <script src=" https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> More info: http://scrollmagic.io/docs/animation.GSAP.html Happy tweening.
  44. 4 points
    Hi Blaasvaer, I can understand that it can take some time understanding how all the tools work together and which ones are included where. This is why we put all of the "things you need most of the time" into TweenMax. To see what those things are we have this page: https://greensock.com/tweenmax Note it also lists methods exclusive to TweenMax that TweenLite doesn't have. This page shows how TweenLite on its own is really only focused on animating numeric properties of JavaScript objects but it's power can be greatly extended through the use of CSSPlugin https://greensock.com/tweenlite The TweenLite docs go into more detail about which eases are included in TweenLite: https://greensock.com/docs/TweenLite http://prntscr.com/j4rsa4 If you have suggestions about how we can make this stuff more clear, please let us know. We want to make it easy for everyone.
  45. 3 points
    @smallio You had typo in 'triggerElement'. The triggerHook has value between 0 to 1 that determines where your trigger is going to be. Always a good idea to turn on indicators while developing.
  46. 3 points
  47. 3 points
    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!
  48. 3 points
    Hi @mary92 and welcome to GSAP! You may or may not need ScrollMagic here ... there are many cases where ScrollMagic is not needed for a parallax effect. I have two examples of navigating that produce a parallax effect; one where I use ScrollMagic and one where I don't In this one https://www.reynoldslakeoconee.com/golf I do use ScrollMagic to trigger the parallax movement at specific timings ... as each background image comes into view. (for some reason there is some jankiness in Firefox that I have yet to figure out ... Chrome gives the best result, Safari gives an acceptable result, Firefox is pretty bad) For this one https://www.reynoldslakeoconee.com/our-community/blog, a slider, I do not use ScrollMagic and just allow the slide transition Tweens to account for the parallax movement. It's the slider at the top ... it's not a true "parallax" effect, but uses the same principles which can be adapted for a more immersive parallax. Maybe picking them apart can help you?
  49. 3 points
    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?
  50. 3 points
    If I understand correctly you just need to use staggerTo tween instead of using callbacks, take a look at docs for more information or check the video, https://greensock.com/docs/TweenMax/static.staggerTo() Does that help?