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

  1. It's the remainder or modulo operator. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_() for more info.
    4 points
  2. As I asked in the last post, I am not sure how you want to decide which elements to move based on the values in the array. If you wanted to have every other element move in the opposite direction you could do so using the following code: x: function (index) { var xpos=[-40,40]; return "+=" + xpos[index % 2]; }
    3 points
  3. You'll need to set() it after your resizeBounds function is called because that's where you set the bounds. resizeBounds(true); TweenMax.set(".draggable", {x: 125}); As you have it coded now, that will have no effect because you have this tween in that resize function: TweenLite.from(draggable.target, 0.3, {x:x, y:y}); That would immediately overwrite the set() tween. I just commented out that tween in the resize function so you can see that everything works. https://codepen.io/PointC/pen/LKyraJ You could also used a delayed call for the initial set() if you need to keep that tween in the resize function. (I'm assuming you do, but didn't have time to look through everything in your code.) https://greensock.com/docs/TweenMax/static.delayedCall() Hopefully that helps. Happy tweening.
    3 points
  4. 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.
    2 points
  5. Hey MstudioIL, It looks like the stretching and positioning issues are related to your Three.js scene and not related to GSAP. As such it may be better to get help on StackOverflow because this forum is dedicated to GSAP-related issues and questions, so you may not get an answer from people here.
    2 points
  6. Hey ninmorfeo, I'm not quite understanding what you're trying to do here. Let me explain what I see happening: xpos = "+=" + xpos You're setting the variable xpos equal to a string because the + concatenates the variable xpos at the end to it. So you will likely end up with something like this: "+=-100,200". I don't think that's what you want. However, since xpos is originally an array, I'm not understanding what you're wanting the += to do. An array += an array doesn't make much sense. Are you just trying to double each value in the array? Or just have each object use the value in the array that matches its index?
    2 points
  7. Hi @MstudioIL, Where is the case, the CodePen ??? Best regards Mikel
    2 points
  8. Yep , that's correct. Trying to measure/animate display:none elements will cause problems. It's best to set the opacity to 0 and/or visibility:hidden. Check out autoAlpha: https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha Getting dimensions and animating masks and other non-rendered elements in the <defs> can also be problematic in some browsers, but we've discussed workarounds in a few threads. Happy tweening.
    2 points
  9. You should be able to set the initial draggable position using set() or you can even tween it to its starting position. Basic example: https://codepen.io/PointC/pen/ZdKoNY Happy tweening.
    2 points
  10. There's a bit too much to dig through here with all the ScrollMagic scenes and pins along with resize events. I'm not sure what should be happening, but I'm seeing console errors with ScrollMagic. (Cannot read property 'currentStyle' of null) If you think the problem is GSAP related, please try to provide a more simplified demo so we can more easily assist you. It does not need all your actual assets and functionality. Just enough to show the problem. Thanks.
    2 points
  11. Thanks for that Joint.js reference. I had also known of it and was gonna post it also but didn’t notice or realize they offered an open source version (cool I better re-look at some others too). There are also others which are only payment or subscription based. Along with a lot of other frameworks related specifically to flowcharts and diagraming which offer connectors but those may or may not have the required events, callbacks etc., logic included. You can even find some nice D3.js, etc., examples which are relative. Many options to choose from but of course no one size fits all. So it just simply can't be definitively answered in a simple forum post to satisfy everyone or every need for such a broad topic. ;--) Nah I don’t accept that, my post was basic. Not to name drop (and in no particular order) but virtually every snippet and code logic discussion posted by any of these users are generally encapsulated with nuggets of pure brilliance and learning opportunities: @GreenSock , @Carl , @OSUblake , @PointC , @Jonathan , @mikel , @Dipscom , @elegantseagulls , @Rodrigo , @Shaun Gorneau , @Sahil , @Acccent , @Diaco , @Victor Work , @Visual-Q , ++++ so many others. Including many single post wonders by people which are never to be heard from again. Many thanks to all ! These people and many others are all Greensock forum heroes, and much more worthy of such high praise for their daily posts. But I'm still glad you liked the post, thanks.
    2 points
  12. I'm not quite sure I follow the percentage question. Animating the (xPercent:-20) percentage like your example will be relative to the element itself. Are you wanting to animate (or set) it to 20% of the available screen width? If that's the case, you have the screenWidth variable available to you so you could do something like this. https://codepen.io/PointC/pen/wLeqdP Does that help? Happy tweening.
    1 point
  13. 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
  14. Is it a mask or something in the <defs>? If so, I wrote a little tip about that here: If that's not the case, a demo would be helpful. Thanks.
    1 point
  15. I see, thanks for clarifying. You can pass an index into the x function like so: x: function (index) { var xpos=[-40,40]; return "+=" + xpos[index]; } https://codepen.io/ZachSaucier/pen/jjwVQb?editors=0010 However, this does not effect all of the 12 boxes that you have. What are you wanting to do with the other 10 boxes that don't have an array value that matches up indexes with?
    1 point
  16. It looks like you just have some numbers wrong, like an extra frame. Try this: TweenMax.to('.character2', .25, {repeat: -1, yoyo: true, repeatDelay: .15, x: -600, ease:SteppedEase.config(2)});
    1 point
  17. I replaced top and left with x and y again and it did indeed solve the jumpy behaviour in Safari. Don't know how i missed that in the first place. Thanks again, very much appreciated!
    1 point
  18. Yes, it's called only once. For stagger you need to use cycle. Check out the docs for cycle... (at the bottom) https://greensock.com/docs/TimelineMax/staggerTo And this... https://greensock.com/cycle Also, be sure to check out the learning section. https://greensock.com/learning
    1 point
  19. It is good to see a fellow smiley face around here. You have one up on me, since my avatar does not have any hands. But that's what mustaches are for.
    1 point
  20. Shhh .. I was trying to be discreet. ? <non-discreetness> But in full disclosure I meant to name drop and blatantly thank all those folks (+more) for all they do around here. Indeed most their posts are full of nuggets of gold. Anyone viewing this thread (13K+) please note the forum search and taking time to back read through any of these peeps posts is like GSAP gold just laying there. Pure GSAP goodness to be had by all, so be sure to profit from it. </non-discreetness> I thought it was fitting in light of the original tone of the thread.
    1 point
  21. Hi @MstudioIL, This could be a way: var all = new TimelineMax({repeat:-1}) .to('.box',time,{scale:0.5},time) .to('.box',0,{autoAlpha:0},time,1) master.add(green01) .add(green02,0) .add(green03,0) .add(green04,0) Happy tweening ... Mikel
    1 point
×