Jump to content

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Dipscom

  1. Hi, hi, It was bedtime here, sorry for the long delay... I think the true answer is going to be a little bit more involved than what I am going to describe now but, we better off by going step by step. What you are describing on your last post is the window.matchMedia method here's a quick explanation on how to use it. So you'd go like: Note that I added a listener to the mediaQuery, you might not want to do that in your case.
  2. It depends, really. Are you thinking of a situation where someone will be resizing the window while the tween is running? Or are you thinking of a situation where the leftover styling might be the problem? For the first question, there isn't really a easy simple way. You'll have to keep track of the animation, listen for the breakpoint event, save the tween progress, rebuild the tween, reposition the progress. For the second, it's a tad easier. Just use clearProps in your tweens. :)
  3. Firstly: Welcome to the forums. I forgot the greeting in the previous post. ? I wouldn't say what you have is a problem. It all depends what you need to achieve. If your 'not-taking-space' is not related to the timeline, you're far better off calling the function rather than hacking around with Mikel's idea. Bottom line is: it makes no sense to have a tween that does not takes space in a timeline simply because the whole point of organizing tweens in a timeline is to have them controlled and accounted for. If your tween is not part of the timeline, well, call a tween outside the timeline.
  4. Dipscom

    Follow by mouse

    Mikel's idea is probably what you want but instead of using setInterval, you should use requestAnimationFrame
  5. Elaborating a bit more on Mikel's suggestion: You can pair what he's suggesting with a label: var tl = new TimelineMax({}); tl.to(".orange", 1.0, {y:200}) .to(".photo", 12.0, {scale:1.2}, 'labelName') //... more tween stuff .to(".button", 1.0, {opacity:1.0}, 'labelName') //insert tween at label 'labelName' of the timeline .to(".other-button", 1.0, {opacity:1.0}, 'labelName') // that way you can have several tweens off the same spot Not your 'not-taking-space' tweens will all have to be placed at the end of the timeline, else you won't achieve your desired effect. Another alternative is to have a call to a function that triggers whatever tween you want var tl = new TimelineMax({}); tl.to(".orange", 1.0, {y:200}) .to(".photo", 12.0, {scale:1.2}) .call(fireTween, ['.a-button']) .to(".button", 1.0, {opacity:1.0},0) function fireTween(el) { TweenMax.to(el, 1, {opacity:0); } But bear in mind those tweens will not be part of the timeline and thus, will not be controlled by it. No pausing, reversing, or anything.
  6. Ohhh, interesting... I might have some opening in the near future, how soon are you planing on starting? Would you consider part-remote? It's a bit of a trek from where I am to Reading.
  7. Ok, it's fixed now. It seem that you cannot (or should not) apply transformations to non-rendering elements (I initially had the other cubes in a <symbol>).
  8. Just looked at my example pen on my android phone and noticed the second example is not rotated correctly. I shall investigate. Nag me in a couple of days if I don't come up with an update until then. :D
  9. Hello! Sorry for the delay, I did not manage to go into an covert operation myself until just now. Let me see if I understood what you are after: You want each of those cubes to move with its own rotation, not together as it now. If that's the case, you will have to create a timeline for each of the cubes. Once you shuffle your array, you have to loop over it and give each item there its own timeline. Then, you will need to set them off at different starting points as you have created infinite timelines. Actually, that made me very confused. You are asking about staggering yet you have infinite timelines, so I am not too sure what is the effect you are after. Bellow is a setup that might help you out. Have a look. Note that I made a few small changes on your code and disabled a few bits that did not seem necessary. Also, you should not have multiple elements with the same ID. An ID should be unique in the document.
  10. Coolio, we'll have a look when ready.
  11. It will make troubleshooting easier for us if you could provide us with a less simplified demo of what you are trying to achive.
  12. Low blow! I'mma gonna get the referee to sort you out.
  13. @Shaun Gorneau You undercut me! Damn!
  14. Hi DanielHoff, Welcome to the forums! You can target them by their individual classes: // select all red boxes to stagger timeline.staggerTo('.box1', 0.2, {x: 50}, 0); // select all blue boxes to stagger timeline.staggerTo('.box2', 0.2, {y: 50}, 0); That way, you won't even need to do a select into a var beforehand. Less code, less potential for bugs.
  15. I was looking at it from a 2016 MacBook Pro on Firefox, on a Nokia running Android One on the Brave browser (Chromium). Although I do have a Windows machine here as well, I did not go as far as testing with it. It did not take me a whole hour to trigger the bug but it was not easy nor consistent.
  16. Hello ELLEVEN DIGITAL FACTORY and welcome to the forums! It's off by one because you should start counting from zero, not one. So, if you have 26 images, the first one is already shown therefore, you only have 25 steps to go. Same with the dx, it should be one unit less. In your case -7500.
  17. I would have thought @GreenSock would have chimed in by now but I guess he's been bogged down with other stuff these days. I am finding this issue fascinating but, unfortunately, I can't think of anything at the moment to help remediate that. Keep bumping this up whenever you have more info and hopefully we'll manage to work something out.
  18. Well done, mate. Don't downplay your own efforts and diligence. Muito sucesso e parabéns pela conquista.
  19. Yes, I did but that one I know of (never got around to using it or becoming familiar with, though) and I know it's part of GSAP so, I knew it was present outside the loop. The missing link for me was the fact that the _flip was being attached to the JavaScript representation of the DOM element, not to the "box" var. ps: Too late in the day to process what you're doing in this latest post... But let's stop with the hijacking of the thread. ?
  20. Hi Annika, Yes, you can use functions to create your Tweens or timelines easily. // If you create a function that will take the inputs you might want to change function createTween(element, vars) { TweenMax(element, vars.duration, { x: vars.x, y: vars.y, ease: Power1.easeOut }); } // Then in your loop you could do something like: for (i = 0; i < targets.length; i++) { demos.push({ x: 0, y: 0 }); createTween(demos[i], { duration: targets[i].s, x: targets[i].x, y: targets[i].y }); }
  21. Once again, things seem so obvious after one understands it. I knew of function hoisting, this is the first time I am told of variable hoisting but, knowing how JavaScript behaves, the variable hoisting makes total sense. What was confusing me was how the _flip was being sent from one loop to the other as I was seeing all those "var box = ..." being declared in the loops. Great stuff, as always. I'm confident you'll make a developer out of me one day. ;)
  22. I see. Well, I'm glad it is working and that you got your system completed. Hopefully you won't have issues with the rounding number when the time comes.
  23. Blake, I am a bit confused by your usage of the _flip object. You are using three loops to set/change/update all that's necessary - So far, so good. However, I can't make sense of the fact that you are declaring a box variable during the first loop, where you assign a _flip property to it and then, during the third loop you access that same _flip property. Hang on, something just seem to have clicked here... Do tell me if this is what is happening: // First - record start position without transforms for (var i = 0; i < boxes.length; i++) { var box = boxes[i]; // This is an assignment by reference, right? This does not create a new object or anything, it's just a shortcut. box.style.transform = "none"; var rect = box.getBoundingClientRect(); // Which means, the bellow... box._flip = { x: rect.left, y: rect.top }; // ... is the same as // boxes[i]._flip = { // x: rect.left, // y: rect.top // }; // So, you are asigning the _flip object to the DOM element referenced by boxes[i] as a new custom property. } //... // Last - add transforms back with new position, for (var i = 0; i < boxes.length; i++) { // Thus, when you create this variable, boxes[i] already has _flip as a custom property. var box = boxes[i]; var rect = box.getBoundingClientRect(); var t = box._gsTransform; box._flip.x = t.x + box._flip.x - rect.left; box._flip.y = t.y + box._flip.y - rect.top; } Damn! This is enlightening.