Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 12/08/2017 in all areas

  1. Hi @Joooonatan Welcome to the forum. If you start a timeline with a negative delay, I'm pretty sure you'll rip a hole in the space-time continuum. Actually, I think you may be looking for the position parameter. If you add those nested timelines to a master timeline, you can start them at labels, hard-coded times or relative to their normal start time. It could be something as simple as this. var tl1 = new TimelineMax(); var tl2 = new TimelineMax(); var master = new TimelineMax(); tl1.to(someElement, 20, {...}); tl2.to(anotherElement, 10, {...}); master.add(tl1); master.add(tl2, 10); That would start tl2 at the 10 second mark on the master timeline. That's just the basics of the powerful position parameter. Check out this post for more info and a better understanding. https://greensock.com/position-parameter You should also look at creating your timelines in functions and returning them for use on a master timeline. Here's @Carl's recent article to show you how it's done. https://css-tricks.com/writing-smarter-animation-code/ Hopefully that helps. Happy tweening and welcome aboard
    4 points
  2. What do you expect to happen?
    2 points
  3. @mk1 .. Yes since its just a proxy element, it is created in the DOM by jQuery, but is hidden by GSAP like @Sahil said above. You can find more about how jQuery creates DOM nodes when a self-closing tag ("<div />") is used as the selector. If jQuery was not included, then you would have to create the proxy element yourself with createElement(). http://api.jquery.com/jquery/#jQuery-html-ownerDocument
    2 points
  4. Sorry, the engine doesn't and really can't work like that. An onComplete, by design, is fired when a tween has run for its full duration, not when a target value is reached. Consider an Elastic ease where the target value is met 4 or more times BEFORE the tween is finished: It would be very strange if an onComplete fired the instant the target value was reached. Same thing with a bounce. Also developers often rely on the precise timing of an onComplete firing so that they can make certain assumptions about the state of their animations before certain events happen. Assume you had 2 separate tweens that moved 2 boxes across the screen and you wanted them both to move down after 5 seconds TweenLite.to(".red", 5, {x:200}) TweenLite.to(".blue", 5, {x:300, onComplete:moveAllDivsDown}); function moveAllDivsDown() { TweenLite.to(".red, .blue", 1, {y:200}); } It would be very strange if some "outside force" set the ".blue" element to an x of 300 prematurely and then it called that tween's onComplete and forced both elements to move down before 5 seconds had transpired. -- I think in your case the best solution is to just have your own checks in place using onUpdate, onStart or whenever necessary.
    2 points
  5. Thanks to Carl for pointing me in the right direction. If anyone can benefit from it here's the final code, a pretty simple and straightforward way to connect a repeating yoyo to a jQuery hover method. var homeButton = $('button.home'); homeButton.each(function(){ $(this).hover(over, out); var buttonSVGElement = $(this).find('svg'), homeButtonAnimation = new TimelineMax({repeat:-1, onRepeat: pauseAnimation, paused:true}), play; homeButtonAnimation.to(buttonSVGElement, .5, {xPercent:50, repeat:1, yoyo:true, ease:Power1.easeInOut}); function over(){ homeButtonAnimation.resume(); play = true; } function out(){ play = false; } function pauseAnimation() { if(play === false){ homeButtonAnimation.pause(); } } });
    2 points
  6. It looks like the Chrome (in responsive mode) is automatically firing a "pointercancel" event even though Draggable does everything in its power to avoid that. It's basically ignoring the preventDefault() call, and acting like you want to touch-scroll the content. Definitely seems like a browser bug to me. The only way I could find to resolve your demo is to simply add the following rule to the CSS: .item { touch-action: none; } Again, I'm pretty confident this isn't a Draggable bug. But at least there appears to be a relatively easy fix you can apply to your CSS. Does that help?
    2 points
  7. A GSAP tale: One goofy guy’s odyssey from knowing nothing to knowing just enough to confuse himself. (This is crazy long so feel free to jump to the epic conclusion). Greetings fellow GreenSockers. The end of this week marks the one-year anniversary of my first post on the forum so I thought I’d take the opportunity to share my 12-month story and hopefully encourage others to jump into the conversations around here. Maybe you’ll recognize yourself in some of the things I’ve experienced. My quick history in a nutshell Web design and coding is a second career for me. After 15 years of owning and operating a photography studio and processing lab (back in the film days - yup - I’m old), the digital camera came along and changed that industry, which necessitated a new career for me. I shifted to video production, which led to motion graphics and finally to web design. Our little agency now offers all those services. The web design clients never needed anything fancy so JavaScript took a back seat to HTML & CSS only sites for a number of years. JavaScript & GSAP: false starts and other obligations I first discovered GSAP a few years ago, but only tried it briefly. It looked cool, but with the time obligations of field video work and motion graphics jobs, it wasn’t something I could work into the schedule. Besides that, it was JavaScript – too complicated I thought. I knew JavaScript was the third piece of a good web designer’s skillset along with HTML and CSS, but I always convinced myself that I didn’t have the time and the sites we built didn’t need it. JavaScript Books + Classes = Fail I did make a few attempts at reading some JavaScript books and working through some online tutorials, but it just never ‘stuck’. Maybe the examples were too theoretical and dry or they were the wrong books and classes. I really don’t know, but I abandoned the learning process a number of times. Cut and Paste mentality Why did I really need to learn anyway? You can just Google what you need, cut and paste some code and presto – you’ve got some working JavaScript or jQuery. I only understood a small portion of what I was cutting and pasting, but hey… it worked so the problem was solved. That’s how I operated for quite some time. What’s a loop? What’s an array? What’s an object? Who cares? Wait a minute. This is ridiculous. Last spring, I was remodeling our company website and I had all these grand visions about making things move and behave in certain ways. Googling for code just wasn’t cutting it. I suddenly felt stupid. “This is ridiculous!” I thought. I should be able to learn how to write my own code. Oh yeah, I remembered that GreenSock thing I had looked at a few times and abandoned. That might work. Maybe I could actually learn how to use it this time. I become a forum lurker I started lurking in the shadows of the forum. After reading a lot of posts, I saw people asking many types of questions from simple to crazy complicated (at least to me). Two things I noticed were that every effort was made to find an answer (no matter the difficulty level of the question) and not one post was condescending or snarky. That’s quite rare on the ol’ interwebs, isn’t it? Hmmmm…maybe I’m in the right place. Oh boy… time to ask a question of my own One of the great things about learning GSAP is you’ll also pick up a lot of other JavaScript and/or jQuery along the way. I kept reading and practicing with some simple tweens, but now I had a question. Dare I post? I suppose, like many others, I feared looking like an idiot even though the forum members and moderators seemed quite nice and helpful. I do several dumb things every day so you’d think I’d be used to it by now. Oh well, here goes. My first question had to do with the indexOf() a Draggable snap array. Within 30 minutes, Diaco and Rodrigo had posted great answers and neither one called me stupid! Yay – how cool. I get hooked on GSAP and the forum About that same time, I decided our company should discontinue on-site video production and switch to studio only filming. I got tired of lugging loads of video gear in and out of buildings – it’s quite tiring and as I mentioned earlier – I’m old. This freed up some time and I decided to dedicate that time to learning GSAP and maybe, one day, even helping others. It wasn’t too long and I actually knew the answer to a forum question. I posted some information and wow – a little red indicator lit up on my control panel. Someone liked something I wrote. How fun – I’m hooked. Carl makes direct contact I continued to learn and experiment. I posted a few additional questions of my own, but I tried to answer more than I asked. If someone posted a question for which I had no answer, I tried to look it up in the docs and figure it out. Most of the time I was far too slow and Jack, Carl or one of the mods would already have the answer posted before I was done reading the question, but it was an interesting way to learn. I did sneak in a few good answers, which led to a private message from Carl. He thanked me for participating and helping in the forums. I thought it was pretty cool that a super smart guy like Professor Schooff would take the time to do that for little ol’ me. My decision to dedicate time to the platform and forum was reinforced. http://i.imgur.com/hdaB73Y.jpg Blake and I have a conversation I don’t recall if it was a back and forth in a forum post or a private message conversation, but Blake told me something that, of course is obvious, but it stuck with me and is important for all of us to remember. He mentioned that we all enter this learning process knowing nothing. If someone of Blake’s considerable skill level can be humble enough to remember first starting out in code, there may be hope for me after all. I guess if you think about it, there was a time when the simple concept of a variable was brand new to all of us. We’re not born with these abilities. They’re learned and we’re all at different points on the educational path. Never feel stupid for not knowing something. Moderator Promotion Throughout the last year, I’ve continued to learn and study both GSAP and JavaScript. Some of those books I abandoned in the past even make sense now. I’ve tried to be active in the GS community and answer as many forum questions as possible. If I’ve answered a question of yours, I hope you found it somewhat helpful. I’ve cranked out some fun CodePens and finally started a Twitter account to tweet them out. I am nowhere near an expert with GSAP or JavaScript, but I know so much more than I knew a year ago. Apparently I know enough to be entrusted with a forum promotion to Moderator status. I’m honored to be included on such an amazing team. 12 months down – what’s next? My agency duties are still numerous so I can’t dedicate full time to coding, but it remains something to which I’m committed and thoroughly enjoy. I started this 12-month GSAP journey just wanting the ability to write my own code rather than cutting and pasting the work of others. I’m confident I have achieved that, but I still have days when a simple piece of code just won’t coalesce in my brain and that can be frustrating. I guess we all have those days, right? I make several mistakes every day, but that’s o.k. too. I learn a lot more from my screw-ups than I ever do when it all goes right on the first try. I plan to keep learning and getting better and when I get stuck, I’ll be able to get an answer from this amazing community. I’ll continue to give back to the GS community by answering any questions that are within my abilities to do so. The super mods: Jonathan, Blake, Diaco and Rodrigo Thank you to my fellow moderators. You guys rock and have taught me so much. @Jonathan – if there is a browser bug, quirk or special fix that you are not aware of, I’ve yet to read about it. Your knowledge has helped me fix many pieces of code before they even became a problem. Plus, if I ever have a question of top/left vs. x/y, I know who I’ll ask. @Blake – if I could be half as good at coding as you, I’d be a very happy guy. Your work always teaches and inspires me. I don’t think you’re allowed to ever stop posting on the forum or we may all show up on your doorstep and ask questions. @Diaco – your code is always so concise. I deconstruct some of your pens and am astounded by how much you squeeze out of a few lines. If I made some of your pens from scratch, I’d have 20 variables, 5 loops, 12 tweens and 80 lines of code. You do the same with two variables and 4 lines of code. Amazing stuff. @Rodrigo – when searching the forum, I often land on one of your past posts and learn a lot. Your knowledge is vast and I wish you had more time to post around here. Your ninja skills are incredibly strong. Our superhero leaders @Carl – I’ve participated in several online forums ranging from graphic design to 3D to video production, but the GreenSock forum is the best and a big part of that is you. You not only provide great answers, but you do it in clever ways with just the right amount of humor thrown in here and there. The collection of videos you’ve made is invaluable and should be mandatory viewing for anyone interested in GSAP. I’ve seen you monitoring the forums at all hours of the day and even on weekends. When you get any sleep I’ll never know, but I thank you for your dedication and sharing your knowledge. @Jack – how you had the vision to start GreenSock and write the first version of the animation platform I can only imagine. I’m glad you did because GSAP is such an amazing collection of tools. The friendliness of the community is definitely following your lead. I don’t understand a lot of what you talk about sometimes, but I know enough to be amazed by your brilliance and talent. You call yourself just a guy who geeks out about code, but you’re more than that. You’re a smart and generous innovator who’s created a special brand and place on the web. I think I can safely speak for the community when I say we all appreciate the time and effort you put into helping us make beautiful and high-performance animations. Thank you sir. The epic conclusion. Well… maybe just a regular conclusion. If you didn’t read the whole post, I don’t blame you. It’s ridiculously long and I’m just some guy you don’t know so I’ll wrap it up with this bit of advice. Whether you’re a genius or feel like an idiot, it doesn’t matter. Try to learn one new thing each day and before you know it, a year will have passed and all those little bits will add up to new skills and abilities. If you’ve never posted on the forum, please jump in and participate. The more voices we have around here, the more we all benefit. If you need an answer, please don’t be afraid to ask a question. Believe me, I’m just some goofy guy in front of a computer. If I can learn this stuff, so can you. As I begin my second year in GreenSockLand, I’m looking forward to learning more, seeing everyone’s work and answering as many of your questions as I can. This is an amazing community and I encourage anyone reading this to set up an account and get involved. My best to all of my fellow GreenSockers. See you around the forums. Edit and Update (July 2020): I just made it to five years of hanging around the forum and you can read the continuation of my journey here. motiontricks.com Finally, without further ado, I introduce you to motiontricks.com - Craig (PointC) PS I made a little CodePen to commemorate my one-year forum anniversary. It’s how I felt before and after discovering the power of GSAP. Enjoy.
    1 point
  8. Hello, I would like to control a video frame by frame via a slider. As It is a short video, my idea was to embed it in a sprite sheet and then move it along a slider. My Sprite sheet is 11*10 and the size of each 300x250. I found this great CodePen: http://codepen.io/astrogastro/pen/Cvidl Which basically do what I am looking for (just need to add a slider rather than a mouse drag and it is all good) However, The sprite sheet used was on 1 line only and I cannot do that as I would end up with a 31000px jpeg, which I guess is not good. How can I modify the code pen to force the sprite to go to the line every 10*300px? Sorry if it is a little bit confusing, I am not familiar with JS, I just want to show the front end, the type of animation I am looking for. Cheers Nico
    1 point
  9. Ok after a little bit more searching it is apparently not possible to animate masks with GSAP code unless you use this. Adobe really needs to catch up with this. And I need to learn to hand code these so I don't have to rely on Animate CC.
    1 point
  10. Hello @Joooonatan and Welcome to the GreenSock forum! Here is a video tut of the position parameter that @PointC advised Happy Tweening! :0
    1 point
  11. Like @Sahil, I'm curious about what your goal is. If you want to jump to a certain place in the timeline, it's as simple as: tl2.seek(10); Or you can do it any number of other ways, like tl2.time(2) or tl2.totalTime(2) or set the progress between 0-1 like tl2.progress(0.5) to jump to the halfway point, etc.
    1 point
  12. @Sahil Everything was working fine, I had a spelling mistake on line 283, where I was calling all carousel elements globally: TweenMax.set("." + defaults.singleSlideClass), { x: "+=" + plugin.$diffX }); and I had to change it to: TweenMax.set(plugin.$slides, { x: "+=" + plugin.$diffX }); where: var plugin = this; plugin.$slides = this.$element.find("." + defaults.singleSlideClass);
    1 point
  13. thank you so much. I got it running now.
    1 point
  14. Thanks @GreenSock - that's a massive help and super close. I didn't even know `touch-action` was a thing, so I've learned something too. However, `touch-action: none;` means you can't scroll the content down either. I've resolved my issue by limited touch action to the y-axis using `touch-action: pan-y;` . This could be an issue if someone wanted to create a two dimension Draggable with text and maintain scroll on the element.
    1 point
  15. Thanks Jack for the update. I will check out your recommendations as soon as I find the time... Pre christmas is always pretty busy.
    1 point
  16. Great suggestions, @mail. And sorry it took a while to respond. You can actually update the animation that's selected anytime, like: var dt = GSDevTools.create({...}); //then later... dt.animation(yourAnimation); It does only record whatever is created in the global timeline within the first 2 seconds after being loaded (it seemed wasteful to go much beyond that) but if you set the animation to a particular timeline and turn off globalSync, it should update just fine even if you make those changes well beyond the first 2 seconds. Nevertheless, in light of your suggestions, I made the following changes to this beta (unreleased) version that's only usable on codepen right now: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools-latest-beta.min.js New GSDevTools.globalRecordingTime static property which is the time (in seconds) that it should record animations in the global scope. The default is 2, but you can set it to something else within the first 2 seconds to push it beyond that if you prefer, like GSDevTools.globalRecordingTime = 10; It's very unlikely that this will be necessary though. New instance-level kill() method that destroys the instance. So you can do: var dt = GSDevTools.create({...}); //then later... dt.kill(); And of course you can create as many instances as you want. Again, don't feel like you need to settle for the global timeline thing - I find that it's often extremely useful to link a GSDevTools instance directly to a particular timeline (and make sure you turn off globalSync) like: GSDevTools.create({ animation:myTimeline, globalSync:false }); And then if you make changes to myTimeline, it's typically reflected. Please let me know if everything works the way you'd expect. Once I get confirmation, I can update the "official" one that's not locked to codepen. Thanks again for the suggestions.
    1 point
  17. Welcome to the forums (and Club GreenSock), @LingoQueen. Those are premium plugins that you'd get by downloading them from our site, either from your dashboard (the big "Downloads" area) or from any other "Download GSAP" button on this site (as long as you're logged in). You'd just use the plugin files that you get in there, load whichever ones you need into your page with a <script> tag and you're off to the races. Does that make sense?
    1 point
  18. @Carl I see your point about the duration being the completion target and not the property value, specifically in the case of springs/bounces. I'm dealing with user-interruptible tweens/timelines, so it does look like my best bet is within onUpdate/onStart.
    1 point
  19. Alright, I spent several hours looking into this and I've got some things to share. First of all, here's a fork of your demo; the only thing I changed was pointing to new versions of GSDevTools and TweenMax: Some comments: GSDevTools basically "records" for the first 2 seconds after it loads, and figures out the duration based on all the tweens/timelines at that point. If your goal is to use GSDevTools as a global timeline, you can't really mess with the timeline part-way through. It's a little bit like a movie/video scrubber playing and then when it gets to 75% done, you suddenly remove the last chunk of the video completely and expect the scrubber to still work properly. Not that you're doing something "wrong" - it's just not a good fit for a scrubber tool on a global timeline like GSDevTools. You should be able to dynamically update a timeline that's directly wired to a GSDevTools instance, though (not globally synchronized), Like: GSDevTools.create({ animation: tl, // <- your master timeline instance globalSync:false }); The main reason I had to update GSDevTools and TweenMax (actually, TimelineMax) was that the tweenTo() stuff is tricky; they must update their duration dynamically onStart due to the nature of...well...it'd take a long time to explain, but basically I had to implement fix because this demo exposed an extremely rare scenario where the duration would update incorrectly. Hopefully this gives you what you need to charge forward with building your banners and tapping into GSDevTools. Again, instead of defaulting to the global timeline, you might want to set a specific animation instance and turn globalSync off. That'll give you the most flexibility for wiring up the scrubber to a particular timeline, even if it's dynamically updated (to some degree at least). Let me know if things work well for you with the updated TweenMax/GSDevTools. I always like having them tested more in the wild before doing any official release, just in case there's something else that pops up. Does that help?
    1 point
  20. It's created but only on DOM tree, not visible in HTML. If you watch the video you will see what I am doing. It is like creating a element but never putting it in HTML. And trust me, it is least you have to worry about.
    1 point
  21. transform values like x and y are relative to the objects natural position. If you have an item with left:100px and another with left:200px, their x value is 0. If you give them both an x of 100, they will move 100 pixels to the right of their current position landing at 200px and 300px respectively. The solution for you is to give all your balls position:absolute. This will in effect put them all in the same place with x:0, y:0. You can then place them in a row and space them however you like (I use a TweenLite.set()) and then if you tween them to the same x,y values they will end up in the same spot
    1 point
  22. Hello @friendlygiraffe, why not just use an SVG clip-path or SVG mask? Examples of animating the SVG <mask> element using the GSAP AttrPlugin: You want to stay away from animating left, margin-left or width since they trigger layout like @Sahil advised above. which means the browser has to calculate the layout on each render tick, which equals bad janky (lost frames) jitter bug https://csstriggers.com/width https://csstriggers.com/left https://csstriggers.com/margin-left Happy Tweening!
    1 point
  23. I haven't looked at all the examples in depth but setting right:0 on the element will make it grow from the right when you increase its width. .mask2 { position:absolute; right:0; } The trick is just putting it in the proper place to begin with.
    1 point
  24. Sure, you can snag that value from the tween instance's "ratio" property. Does that help?
    1 point
  25. What jack said, have to do it via code. Now there may be a better way to do this (I didn't put a ton of thought into this) but this is how I do it (and i how I use to workaround Chrome's canvas mask bug, which they've recently fixed). If you remember the good old Flash days and how you MANUALLY set up a mask using an Alpha Blending Mode by nesting the clip's content in a movieclip, and then had a movieclip on a layer above with the blend mode set to ALPHA; this is the same way except you don't have a dropdown menu where you can select a blending mode, plus you have to nest it one more time if you want to animate the movieclip as a whole, which I recommend doing just in case. The other issue that I had encountered was that if you wanted content to be animated underneath (i.e. like have the layer underneath the mask be animated on that layer within that timeline), then you had to continually apply the mask every frame. In any case, the mask is now created programatically and you can use code to adjust the mask to do whatever you want. So, have your content as a movieclip, and the masking layer as a movieclip on a layer above, give both instance names (let's say 'content_mc' and 'mask_mc'). Then select both and turn those into another movieclip, nesting those items, distribute to layers and just make sure the mask layer is on a layer above in the main movieclip; give the main movieclip an instance name too, let's call it 'child_mc'. Then lets nest the clip again into another new movieclip, then give it an instance name of 'parent_mc'. I'd personally make a function so you can reuse this, so on the first frame of the main timeline add this code > root.addMask = function(maskClip, maskParent, cacheX, cacheY, cacheWidth, cacheHeight, maskingDuration) { //Add initial mask maskClip.compositeOperation = "destination-in"; maskParent.cache(cacheX,cacheY,cacheWidth,cacheHeight); //Add mask every tick maskParent.updateMaskCache = function(event) { if(!event.paused) { maskParent.uncache(); maskClip.compositeOperation = "destination-in"; maskParent.cache(cacheX,cacheY,cacheWidth,cacheHeight); } } createjs.Ticker.addEventListener("tick", maskParent.updateMaskCache); //Clear tick event after XX seconds maskParent.maskTimeout = setTimeout(function() { createjs.Ticker.removeEventListener("tick", maskParent.updateMaskCache); }, maskingDuration * 1000); } Then inside the main movieclip on a blank layer, add this code > root.addMask(root.parent_mc.child_mc.mask_mc, root.parent_mc.child_mc, 0, 0, 300, 200, 2); The first thing you're passing in is the path to the mask clip, the second being the child clip or the name of the mask clip's parent moveclip (in our case child_mc), then the co-ords from where to start the mask (typically 0,0), the width of the area to be masked (not necessarily the content's width), the height of the area to be masked, and finally the duration for how long you want to apply the mask (if the content is animated). Now, if your content is just static content that just needs a static mask, then you obviously don't need to continually apply the mask, you can just pass in a zero duration. But if the content that is being masked has animated content in it, then you need to continually apply the mask for the whole duration of that animation. In the example above I'm using 2-seconds. Again, there's probably a much better way to apply this All that just to apply a mask programatically, meh. But now you can target the mask to do what you want > .from(root.parent_mc.child_mc.mask_mc, 1, { x:"+=100" }, "+=1"); //Obviously, from an appropriate frame in the timeline Just keep in mind that if you move the mask, then you need to continually apply it over that period of time as well as account for the area that gets affected. Again, there might be a much better solution
    1 point
  26. Yep JeanPz .. now i see something Good job.. but CSS filters wont work in IE9, IE10, IE11, or Edge. But that is expected since IE does not support CSS Filters at this time. I would recommend you look into SVG filters.. since those filters are supported in IE10 and above.. as well as Safari, Chrome, and Firefox SVG Filters using GSAP (cross browser): SVG Displacement and Turbulence: http://codepen.io/jonathan/pen/NqZPwd SVG Tint: http://codepen.io/jonathan/pen/pJxRwG SVG Hue Rotate: http://codepen.io/jonathan/pen/MwPzox SVG Gaussian Blur: http://codepen.io/jonathan/pen/GJPjjQ Hope this helps!
    1 point
×
×
  • Create New...