mic1991

?yeah good riddance

Thanks guys, I have added inline width/height and will test again in IE11. We get about 11% IE users versus 13% last year, so not a huge thing. Is it worth paying for Browser Stack to test this regularly, or do you know of any good quality free emulators? I'm on a Mac see...

I've got a couple of diagrams that, when I test on IE11 (albeit a browser preview via my mac), a white <rect> which I use to 'hide' the markers of a black line, isn't there. How do I remedy this without disrupting how the animations look on other browsers? Codepens https://codepen.io/michael19911991/pen/jJQwqd https://codepen.io/michael19911991/pen/OqrMXG

Just want to say I'm really touched how helpful you guys are on this forum. Cheers! ?

Thank you science! Yes please, I'd appreciate that a lot. I'll PM you!

Hi guys, You know what, I barely understood this when my colleague explained it to me so God knows how I expected anyone else to understand what this animation is supposed to show right off the bat. Sorry I'll try and explain! I actually paid someone on Codementor to build this with me. I was originally using CSS @keyframes but Greensock seemed a better option. Because of this, I still only 50% understand the code on here, as I'll be honest, I didn't know exactly what my mentor was doing, as he worked through this animation. I'm really not offay with javascript but am trying to get my head around it. I've been using Codecademy but none of it seems similar to this haha So the animation demonstrates the difference in molecular bond vibrations according to changes in energy levels interacting with them. In this case, infrared light waves. We make infrared spectroscopy accessories where I work, so this is a diagram to demonstrate some of the theories involved in what we do. So after Button 1 is clicked: • a light wave comes in • the ball pauses to allow the arrow to extend (showing an increase in energy) • the ball moves further left and right, actually from the start-to-end of that next white line above the arrow, to show a more vigorous molecular vibration @mikel thanks for your link I'm going to read through that and do my best to adopt a smarter way to organise timelines, etc. That's a cool Star Wars animation by the way! @Greensock you've actually given me almost exactly what I needed to achieve! After pressing "Button 1" the blue balll (and the spring it's 'connected' to) need to go further left and right, meeting the ends of the white line above the arrow. I also need to figure out a way to allow the "Button 1" to work again after Reset is clicked. Do you think it'd be better to try and start this from scratch, or are there things I can easily to do save this animation?

Hi, Thank you for the quick reply! I can now stop the timeline when I click reset BUT: 1) I can't get the original 'tl' timeline to restart 2) An arrow and red line appear when you click 'Button 1' and if I click reset before they naturally disappear, they stay on the screen, these are part of 'click_tl' Do I need to 'restart' click_tl before I pause it, to remove those elements? and for 1), I've tried tl.progress(0, true) but no dice.

Hello all, This is my first post here or on any forum like this, I'm really sorry if I've missed a previous post about this but I am really new to GSAP and JS i general. My linekd Codepen includes an animation that starts on page load. When 'Button 1' is clicked, the animation pauses, then changes (the blue ball travels further right/left. What I want is, when 'Reset' is clicked, the animation to return to its original state. What am I doing wrong? All the best and thank you in advance. Michael