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 06/26/2019 in all areas

  1. It's not ridiculous. There are technical reasons for that behavior. For example, how you would specify em units for a 3d matrix? https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d If you want to use relative units, then consider using CSS vars instead. An example using vh and vw. https://codepen.io/osublake/pen/OvbqXL
    4 points
  2. What language do you speak? If you want to kill something by class, and you're using jQuery, then do this. $(".kill-these-boxes").each(function(index, element) { Draggable.get(element).kill(); });
    3 points
  3. I don't know if it's just me, but this demo really bogs down. I see some monster size .pngs in there. Maybe try to simplify things a bit. The less convoluted the demo the better. We can't get too deep into ScrollMagic or general coding help, but anything GSAP related is fine.
    2 points
  4. Well, you'd have to have some kind of second trigger to set the animation back to the beginning. You'd also want to use ScrollMagic's events to play the animation rather than setting the tween in the scene. https://scrollmagic.io/docs/ScrollMagic.Scene.html#event Something like this: scene.on("enter", function(event) { tlbox.play(0); }); You could use an onComplete to rewind the animation back to the beginning, but that probably isn't a good solution since the user may have stopped scrolling at that point. A lot of this will be tricky since you don't have a duration set. The enter/leave triggers are the same so this will definitely be odd. ScrollMagic does have premium support available: https://support.scrollmagic.io/
    2 points
  5. Clever how you did that, I will have to steal it.?
    2 points
  6. Hi @ninmorfeo, If you can define a condition for your purposes, then it could work that way: https://codepen.io/mikeK/pen/LKzQeR Happy dragging ... Mikel
    2 points
  7. I'm not sure I follow, but I think you'd want to push each draggable instance into array when you create it. Then loop through the array and kill() them all when you're done with them.
    2 points
  8. oh wow, thanks so much for the quick reply. I just now googled this, and I will refresh my knowledge on this flag. For others, here is the link explaining this: https://greensock.com/immediateRender
    2 points
  9. That's not at all what I was suggesting. I made that demo to show how to use non-pixel units for transforms. Using em, rem or anything other type of unit would work exactly the same. I think you might be missing the forest for the trees here. The way GSAP handles transforms is the one of the biggest selling points for a lot of people, but I'll let @GreenSock know how you feel about special units.
    2 points
  10. What is happening is that on the resize event you are telling the element to scale .from() a particular amount. But, because you already set that scale on load, there's no visible animation. You should be using .fromTo() instead of .from(). Quick show: //default scale: 1 // onLoad trigger scale: from(1.25) > to(1) // note that the current scale of the element is now 1.25 // resize event scale: from(1.25) > to(1.25) // no visible change when scrolling
    2 points
  11. Yeah it would be a lot easier to understand if you got rid of all the graphics for now and just simplified it to the basic elements you are having difficultly with. Once you get it working then you can add them back in.
    1 point
  12. You don't need to load all those gsap files Tweenmax should do it for you. It includes timelinemax and cssPlugin, and you may find it easier to load those scripts in the settings rather than html on codepen. You might want to start from the starter pen. https://greensock.com/tweenmax Make sure you have included jQuery before the other scripts and use proper syntax for using .width() method $('.slides_panel').width() https://api.jquery.com/width/ You should also probably not mix versions of scrollMagic make sure it's all 2.0.7
    1 point
  13. Here's a basic horizontal scroll from a different thread. Maybe it'll help you, but ScrollMagic is not a GreenSock product. https://codepen.io/PointC/pen/vayLYy ScrollMagic also has a premium support area now: https://support.scrollmagic.io/
    1 point
  14. You appear to be telling portfolio text to go "to.....{opacity:1} if you want to fade out you want to go to opacity:0 - see also gsaps autoAlpha Though your x animation appears to be on the portfolio text item not on :before it's worth noting pseudo elements (i.e. ::before) can't have inline styles so I don't believe gsap can directly animate them. You would need to animate something that affects the position of the pseudo item instead. Or better yet refactor your html so it isn't a pseudo element if possible. I've never attempted scrollMagic with horizontal scrolling but your pins do seem to be problematic: I would suggest you visit scrollMagic forum and docs with questions as it is not a gsap product and see: https://scrollmagic.io/examples/basic/going_horizontal.html
    1 point
  15. Are you trying to do this?: this.endDrag()
    1 point
  16. So replace this... Draggable.get(".box").kill(); With this... this.kill();
    1 point
  17. You should use actual elements instead of selectors. The box class represents 12 different elements. If you want to kill something in your hit test, simply kill it. this.kill();
    1 point
  18. It's very easy to do, but you need to show us with a demo how you are getting those cards to kill. Deleting a class from an element is a horrible solution. That can lead to poor performance and memory leaks.
    1 point
  19. Happy to help. I'm sure it will all come back to you quickly, but let us know if you have additional problems or questions. Happy tweening.
    1 point
  20. It's a case of needing to set immediateRender:false. (It's true by default) https://codepen.io/PointC/pen/ydzorx Happy tweening.
    1 point
  21. I don't really understand this: You want to animate something that isn't in view? The warning you posted is if you animate the same properties. That's when an overwrite will occur. If you simply want the first scene to scale and then fade out, a second scene with a new trigger would work fine. They aren't animating the same properties. https://codepen.io/PointC/pen/RzLZyr Happy tweening.
    1 point
  22. Hi @ninmorfeo, A case in a CodePen would be great and helpful ... https://codepen.io/mikeK/pen/pXWbwy Happy tweening ... Mikel
    1 point
  23. 1 point
  24. @Jonathan has written about this quite a bit. Here's one of his many posts about loading assets before the timeline starts. You can use a brightness filter instead of opacity. Here's a basic starter example from a different thread. https://codepen.io/PointC/pen/MQvooQ There are also loads of filters available to you. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter <feComponentTransfer> looks like it could be a lot of fun in your project. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer Happy tweening.
    1 point
  25. That wacky jump is from your pin on line 53. If you remove it, that goes away. Beyond that I'm not really sure what should be happening here. Is there a specific GSAP question? It's usually best to start a new thread so we can better assist you. Happy tweening.
    1 point
  26. ... providing one can afford the bill for the hire.
    1 point
  27. PS There were some changes in the default immediateRender behavior in version 2.1.2. https://github.com/greensock/GreenSock-JS/releases/tag/2.1.2 Happy tweening
    1 point
  28. I'm not seeing any problem with morphSVG. The problem seems to be coming from your progress(1) jump in the setup function. I assume you did that to hide the <li> elements? You can use immediateRender:false to take care of that. I forked your demo and used an addPause() and labels to make things a bit easier to follow. All seems to be working correctly and I don't see anything unusual with the morph plugin. https://codepen.io/PointC/pen/EBvWBx Hopefully that helps a bit. Happy tweening.
    1 point
  29. @danboyle8637, Glad that worked! Yes, it's definitely a good idea to kill animations (and scrollMagic scenes) on componentWillUnmount, otherwise you can get some bad bloat and/or unexpected results.
    1 point
  30. Is the error only in the console, or is it breaking the page? Since you're seeing this when you navigate away from the page, you might want to try to kill your tweens and destroy your ScrollMagic scenes on componentWillUnmount(). My guess is that this will fix that error.
    1 point
  31. What you are asking is a rather tall order. I very much doubt many people will have the time to get time to write the code necessary (happy to be proven wrong, though). As for pointers, the way I would do it is storing the size of the container element somewhere, working out the total area, then, every time a new item is dropped, you subtract it (plus all other items already in) from the total area available. When the total area is zero or less, you turn off the ability to drop new items into the container. You also wanting different size squares and rectangles will add even more complexity to it, by the way. I would suggest you first get a proof of concept going with squares of the same size before attempting to make it work with shapes of different sizes.
    1 point
×