Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

Popular Content

Showing content with the highest reputation on 08/13/2019 in all areas

  1. There are 3 mistakes. in dragEnd, console.log(box) is giving error. There is no such thing as box Remove x:0, y:0 from tween.to I have no idea why, the right box doesnt show border for the second time. But, once you solve 1 & 2, it started working a little. Here is the forked codepen https://codepen.io/kishin-karra/pen/PoYZEKo
    6 points
  2. In addition to the great advice from Shaun and Zach, I thought I'd point you to this similar thread. It has a little bit of extra info which might help too. Happy tweening.
    5 points
  3. The path isn't morphing as you'd like because your paths have some funky points. The thin has more than the thick and some of the point positions on the thin look very odd to me. Ideally on a shape like that you'd have 8 points. Here's a side by side comparison of your thin and thick. As with all things SVG, it comes down to asset prep making your life a lot easier. Just FYI — you don't need three shapes for this. Your original and thin versions are the same. You can just morph back to the original whenever you like. Hopefully that helps. Happy tweening.
    5 points
  4. Hey dude, I was just worried about publishing full code online since its not fully live yet for work, but vids are fine Heres some more things i made with the svg plugin hooked onto it http://zwf-instant-internal.s3.amazonaws.com/shared/lucky/2019/aug/doge.mp4 http://zwf-instant-internal.s3.amazonaws.com/shared/lucky/2019/aug/ohsnap.mp4 And I added the ability to automatically set the transform origin to 50% 50% for svgs by analyzing the path so I dont need to manually set the width and height. You can see the center point by enabling debug: true into the object
    5 points
  5. You're missing the GSAP plugin from ScrollMagic <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script> Happy tweening.
    4 points
  6. I think moving the scripts to the bottom of the page will solve this for you.
    4 points
  7. Hi @alguna, It's a namespace issue. Putting that Timelines in the window namespace will help you dynamically address them. https://codepen.io/sgorneau/pen/ZEzQXem?editors=1111 EDIT: 30 minutes in and I'm already falling over other answers ? What @ZachSaucier said!
    4 points
  8. Hey alguna and welcome to the forums, One way to do that would be to create an object that maps the ID to the timeline like so: const map = { "tl_A": tl_A, "tl_B": tl_B, "tl_C": tl_C } and in your click listener you use the map to fire the right timeline: map[triggerId].restart(); https://codepen.io/GreenSock/pen/pozgWRK?editors=0010
    4 points
  9. Hey wcomp, This style of animating from one state to another is often done using a technique called FLIP. GSAP has a helper function for it that you can find with the other helper functions. It might also help to check out the thread below. Otherwise, try animating something like this and if you run into any errors you can post again in the forums and we'll help where we can
    4 points
  10. Something that occured to me, from ohem's post asking about the health of the banner creation job market, caused me to ponder what I am hearing argued where I work. That static banner ads perform better than animated. I find that counterintuitive, but could it be explained by bad design decisions, things like the CTA not being present on frame 1, or animation used to convey more than one message, or being too resource intensive and lagging. Another point I am unsure of is, do ad platforms charge more per CPM to run HTML5 banner ads. Back in the SWF days, I worked for a piblisher, and I know what they charged advertisers was not determined by whether the banner was a SWF, JPG or GIF, but back then everything was limited to 40K. ...when it comes to animated website banner conversion, businesses need to know HTML5/Flash ads feature a much lower click through rate. The rate is 71 percent less for these ads than those that are static according to Google’s display benchmarks. The reason for this may lie in the fact that it takes too long for the HTML5 ad to announce the call to action. Furthermore, Time reports the average user spends 66 percent of their time below the fold, thus the static ad is quickly seen and acted upon, while the animated ad may be glanced at and forgotten." https://getdigitallyfit.com/website-banners/ ...The campaign started with the client’s static ad creative. This creative showcased an image of the game layout and some of its characters. In a glance, users were able to understand the theme of the game and how it’s played. We made some iterations with the current creative to improve the campaign performance. We added a simple animation by showing one power-up, and then crafted another HTML5 animated creative by combining multiple power-ups. The final HTML5 animated ad outperformed all the other iterations"... https://www.aarki.com/blog/a-comparison-of-display-ad-formats-html5-animated-vs.-static
    3 points
  11. We need to hold back certain things so all the mods look like we know what we're doing.
    3 points
  12. I think I identified the edge case with edgeResistance intermittently causing problems (only when dragging outside the bounds of course) - it's just a rounding thing related to browsers only having a certain amount of precision when reporting the pointer's position. I posted the revised (uncompressed) Draggable here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Better? I'm not sure that's at all related to what you were originally describing, @marya. Please let me know if there's anything else behaving oddly.
    3 points
  13. Oops, I forgot to set the top and left of the elements. I updated the above demo to set them. You don't have to switch your positioning away from flex. One tricky thing: you need to set the position to absolute in a second .each loop because otherwise the elements after the first will be mispositioned. Keep in mind that if a user resizes the page the original position of these elements will likely not be what you want. You need to handle resize logic if you want it to be very responsive. Also keep in mind that anything that comes after these buttons will likely shift up on page load because of the position: absolute. You might want to compensate for that somehow (maybe a set height or set margin-bottom). Happy tweening
    3 points
  14. Technically the x:0, y:0 is just assuring that there is no other offset - the left:p.left, top:p.top is the part that assigns where in the target the element should be positioned. The reason why it's not working in the demo above (in fact, the tween inside of the dragEnd is effectively doing nothing) is because you failed to assign position: absolute to the draggable elements. I'd recommend putting that style declaration inside of the .each function so that you can position them however you'd like before making them have position: absolute. https://codepen.io/GreenSock/pen/abodYaW?editors=0010
    3 points
  15. Sorry about the confusion there - I've never seen that happen before but your demo helped me find a very rare edge case in the conversion algorithm where the arc command "a" could run into a Math.acos(-1) which JS returns as NaN (weird!), so I implemented a workaround and uploaded a revised MorphSVGPlugin. Seems to work great now! (you may need to clear your cache) Like others have suggested, tweaking your path would also solve the issue. But I want MorphSVGPlugin to be as bulletproof as possible Thanks for being "Business Green"!
    3 points
  16. If you need something to be sticky, just use CSS. https://codepen.io/osublake/pen/41a997ea6297132313629b608d0ba39f
    3 points
  17. Oh, look at this, it's a thread party! Whoop whoop whoop! So, I see the zooming in on Chrome and agree that is a jarring experience. It makes me think you have forgotten to add the meta tags for the zooming and scaling of the document. In fact, checking your original link, I don't see any of the metatags. If your are unfamiliar with codePen, press the settings button of your pen, look at the HTML tab and under the Stuff for <head> text area there's a button that says: "insert the most common viewport metatags". Click on that to add some common stuff, save your pen and check to see if that helps.
    3 points
  18. I'm a bit confused about the "why" behind all this - if your goal is to synchronize your audio with a particular timeline, wouldn't it be much easier to just use an onUpdate on that timeline and check the time(), compared to your audio's time and if it drifts beyond a certain threshold, make your adjustment to the audio?
    3 points
  19. As pointed out by PointC, the issue is that the script is trying to run before the DOM content that it's looking for is loaded. If you need to keep the script in the head and can't move it to the bottom of the body, you should use the following instead: document.addEventListener("DOMContentLoaded", function(event) { // Your timeline code });
    3 points
  20. Have you tried to create said animations in CodePen? Having us see a simplified example with markup and CSS will help us help you.
    3 points
  21. Do you mean all images in the row that is about to be revealed, or all images? I hope the first because otherwise there's not too much point in lazy loading them. In terms of how to wait for the images to load, there are different techniques you could use. The first that comes to mind for me is to add the images that should be revealed to an array. Then check to see if all of those images that should be revealed have loaded (by checking if they have the loaded class). If they have, animate them in. If not, you could use a GSAP's delayedCall to wait to check some period later and animate them if they've been loaded then. Does that make sense? A forEach is just a handy method to iterate through a list. You could just use a for loop like this to replace it: for (var i = 0; i < boxes.length; i++) { boxObserver.observe(boxes[i]); } Or, since you're using jQuery already, you could use jQuery's .each() method like you're doing in the else.
    3 points
  22. Wow! I've marvelled at the 'Tanks' ads I'd seen around; amazing work Volcanoflash! Must be fun as well. Here's my ads page >> https://www.andyfoulds.co.uk/banners/html5_banners/ BTW - I use Brave browser and ad-blockers on Chrome and many of the example sites here show-up as blank. When showing work on your portfolio it's a good idea to use the GSAP CDN links - rather than the Google or Sizmek hosted ones - remove any clickTags and ad-size metaTags. It's a pain but avoids a potential client seeing a blank square if they also have ad-blockers in place. Andy___F
    3 points
  23. Another option is not using ScrollMagic on small screens. Here's a thread from yesterday that shows how you can either enable/disable scenes or create/destroy the controller at certain widths. Maybe that'll give you some ideas too. Happy tweening.
    2 points
  24. The GreenSock Animation Platform:
    2 points
  25. Rounding error. Seems that happens in other languages too.
    2 points
  26. Yep. Works fine without ScrollMagic. A wise man once said, "You might not need ScrollMagic".
    2 points
  27. The issue will be most likely related to resize event triggered by the opened keyboard. ScrollMagic tries to recalculate the values to match with new viewport and scroll position. It won't happen on desktop as there is no keyboard showing over the site. Anyhow this issue if we can call it that way is related to the ScrollMagic and it is not really scope of this forum. Try to log out values of scroll position / time-line progress before and after to see how they are affected. Ps: I can replicate this only on first demo opened in separate window. Last demo does the zoom in as Zach described.
    2 points
  28. It's caused by one of the classes given on dragEnd not being removed in the case where the element is dragged from one box directly to the other. One way you could fix it is by removing that class on drag start: onDragStart:function(e) { e.target.targetAttachedTo.removeClass("occupied"); }, https://codepen.io/GreenSock/pen/YzKweeW?editors=0010
    2 points
  29. You are absolutely correct. That is what i mentioned in the initial question as well, I was just trying to figure out if there is a more efficient solution which i could not figure out from the docs. Will go with onUpdate then, Thanks a lot ?
    2 points
  30. Yup, perfectly functional in CodePen (by the way, use the Settings in CodePen to inject <head> stuff) https://codepen.io/sgorneau/pen/dybGVGy Try loading only TweenMax (remove the <script> calling in TimelineMax.min.js)
    2 points
  31. Hey alostdeveloper and welcome to the forums. This is likely due to a loading issue of your assets but without seeing a live page it's very hard for us to help you figure out what's going wrong. Have you tried looking at your browser's console? Usually it will tell you if something is not loading or if you have a different error with your code.
    2 points
  32. Your approach would only work if the images are loaded before the intersection occurs. In the case that the intersection occurs and the images aren't loaded, there is no logic to tell the browser to check again later if the images have loaded since the intersection. So if a user scrolled down to where the images should show but they're not loaded, they would never show (unless they scroll again and the intersection observer event fired again after the images had loaded). That's why you've got to use an approach more similar to the one I outlined above. We were all newbies at some point! No reason to be sorry.
    2 points
  33. No, I don't think it's nonsense, especially if you have a lot of rows of images (it's probably not worth your trouble if you only have a couple of images). Look at each part of what I said individually. Try to think how that piece would look in JavaScript. That's the best way to get better at programming
    2 points
  34. @Arintoos I received your private message, but we need to keep support out here in the public forum. I think you're just missing the ThrowProps plugin on your site. https://greensock.com/docs/Plugins/ThrowPropsPlugin That is a Club plugin. https://greensock.com/club/ Happy tweening.
    2 points
  35. Just about anything can be done if you put enough time and effort forth... It's called masking or clip-path and you can see a nice little video about it here: Regards
    2 points
  36. Wow! We have to love GSAP and the team at GreenSock. Thanks Zack.
    1 point
  37. Hey Greensockers ?, I am trying to set up a Drag and Drop with Snap, forked from Ant Pearson's Drag and Drop with Snap. But some how mine is broken and not snapping as it should, even wit hall the tell-tale signs that it should. I even have commented out implementation that I tried and broke as well. I looked through a number of likely past posts but none of them were doing this. May someone with an idea of what I could be doing wrong point me in the right direction? I would be very grateful.
    1 point
  38. Oh, I didn't mean that your most recent demo had customizations made to GreenSock tools - I was just trying to be clear about what would make the ideal reduced test case. You've posted some other stuff that did include customizations, so I figured I'd mention it, that's all. That's what triggered my request for the most simplistic, basic reduced test case. Your codepen has a ton of other code that might (or might not) be causing issues. The goal was to isolate things as much as possible so we can get you an answer quickly and identify things accurately. It's just tough to parse through 400+ lines of code and try to understand what exactly your issue is, that's all.
    1 point
  39. Thanks @PointC and @ZachSaucier - You've armed me with a couple of good options!
    1 point
  40. Interesting that DrawSVGPlugin.getPosition() isn't in the docs... We'll have to fix that in the next version.
    1 point
  41. Very nice Zach! That means that I really can't use the "display: flex;" that I have used. I un-commented the other button and it ended up on top of the visible one. But that is a CSS problem, not GSAP! Thank you Zack, for your time. This one stumped me. But now I am on my merry way. ?
    1 point
  42. PointC's suggestion worked. Thank you everyone!
    1 point
  43. Hi @marya, just to double check with you, this double clicking is happening when you are using the touch, right? Does it happen when using a mouse/trackpad?
    1 point
  44. Hey @GreenSock thanks for the detailed info and suggestion. Didn't get to sit down and test till after midnight- but re-coding as you described above indeed fixed my issues with GSDevTools so everything is now working as expected. @Dipscom - glad you're updating the repo; that was a big help in getting past my initial problems. In terms of Drupal, although I still need to do some more reading and research, a headless version of Drupal is probably the direction I'm going, but right now, while I've been trying to just get the basics down for integrating Vue / Nuxt / GSAP & Drupal 8, I've been using a new drupal dummy site in which I'm using the (now) native REST functionality along with a REST UI module to take information I enter in a drupal 'view' and present that in json format, which I can bring into my nuxt app through an axios / GET call. I didn't see a way to direct message you in the forum options (and I wasn't sure if there was any policy about posting our emails directly here in the forums) - but if you can DM me, I can give you login credentials for the site or any other info you find helpful so you can poke around and see if you have any thoughts on best way to integrate things. Right now I don't have any specific technical hurdles blocking progress, so will hopefully make some progress on site over next few days and actually start implementing gsap in a useful manner rather than just testing out to see if things are working. Thanks to everyone on this thread for the help. Excited that everything is now primed to go and looking forward to the fun part!
    1 point
  45. Heck, you could even keep the text in the SVG itself and not convert it to a path if you wanted to and had the font loaded (especially if you're going to use the same font somewhere else).
    1 point
  46. Oh, I see. In that case, you might want to look at lagSmoothing ad well. https://greensock.com/docs/TweenLite/static.lagSmoothing()
    1 point
  47. Hey guys, just uploaded some Suncorp Bank work you can view on the link below. https://bradleylancaster.com/portfolio/suncorp-bank-digital-programmatic-advertising-html5/ Cheers, Brad
    1 point
  48. Hey everyone Another quick SVG tip. Set your stroke dash length to 0 and your linecap to round. That will get you a nice circle border around your path or a string of circles along an open path. For a complete string of circle shapes along the stroke, set the gap equal to the stroke-width. https://codepen.io/PointC/pen/VXMmZV If you set the gap to less than the stroke-width, you can overlap the circles and create a nice scalloped edge. I personally like around 50-70% of the stroke-width. Throw a gradient on for a nice picture frame. https://codepen.io/PointC/pen/bvvddx With some creative layering and masking you can confine the scalloped edge to the inside or outside of you path. https://codepen.io/PointC/pen/YaaqPQ Using two strokes with different stroke-width and gap sizes, you can turn an ordinary ellipse into a cloud. https://codepen.io/PointC/pen/RMMMKv Morphing shapes with a circle border creates some cool results. https://codepen.io/PointC/pen/rddOqd Since these are circles making up the stroke and not actual elements, we can’t draw them on or make them move individually. Or can we…? Using a mask, we can draw them on and animating the gap size can bring them into position in an interesting manner. https://codepen.io/PointC/pen/wmmmmK It has its limits but can produce some fun results. The main thing to remember is set your dash length to 0 and the linecap to round. After that, experiment with stroke-width and gap size. Happy tweening.
    1 point
  49. Parallax is really all about perspective and scale. The further back something is, the more it's scaled down in size and movement. Here's the demo from that tutorial if you want to play around with it. Notice in the mouse move function how the x and y values for each layer are multiplied by an offset value, which is kind of like the scale value. function handle_mousemove(e) { // Mouse movement from center var dx = e.offsetX - (w / 2); var dy = e.offsetY - (h / 2); for (var i = 0; i < layers.length; i += 1) { var l = layers[i]; var _x = dx * assets[i].offset; // scale x movement var _y = dy * assets[i].offset; // scale y movement TweenMax.to(l.node, 0.1, {x: _x, y: _y}); } updateGradient(e); TweenMax.to(s.node, 0.2, {rotationY: dx / 10, rotationX: -dy / 10}); // rotate SVG node in 3D }
    1 point
×