ochalmers

Blake, you're an absolute star mate thank you so much. Lovely work.

Thank you so much Blake! So are you saying I will correctly be able to move this circle (gradient) to the correct co-ordinates? I've been absolutely raking the net to find an answer but can't anywhere! Thanks again for your reply

Hi guys! As you can see in my codepen i've applied a clip-path to a group that is holding a gradient circle element, which will in turn mimic a kind of reveal. My main question is do you guys know why or how I can have the element completely follow the mouse within the surrounding box? At the moment it seems as if the transform on that certain element is working in relation to the viewbox. Do you guys know how I can work around this or approach it differently? Thank you so much, Oliver

This looks cool Mikel! Yea the problem i'm having is the alignments of the wrappers. In the original they are incrementally shifted to a negative amount so that the first is clipped to the left and the end is clipped to the right. That calculation is really throwing me off (my demo works with the 4 but when I try with anymore or adjust the size of the wrapper it breaks). Any help here would be amazing!

Haven't posted here in so long that i've just realised my Shockingly Green subscription is up. Renewal time!

Hi guys, I'm trying to recreate a very crude version of the functionality on this site - https://emmitfenn.com/ . As you can see my codepen is working as intended at the moment, but my problem is when I try add another element into the main div (the class for these is UIMenuSlice), the calculations that I have applied don't seem to be adding up correctly. I was hoping some of the wizards in here would be able to shed a light as to how I slightly rejig the calculations I have to allow me to adapt this into a flexible build. There are only 4 elements at the moment but i'd like to be able to change this as possible. Thanks all.

Hi guys, first off sorry for the lack of codepen - I thought it such a simplistic question that it didn't necessitate one. My question is with the scrollTo plugin are we able to scroll in increments? So on each click of a button scroll the window by 100 each time? I thought you may be able to do += but that doesn't seem to work. Here's a site for reference (click the arrows either side of the body). http://resn.co.nz/#!/work/climachill If need be I will set up a codepen. Thanks as always guys.

Hi all! As you can see in my codepen, clicking the white boxes opens up the box to fill the screen relative to the position you have dragged it to. Once you then click the white button again it closes the box and puts it back where you dragged it to initially. This all happens via the lovely .reverse which is fantastic. Obviously the .reverse cycles through the timeline backwards so it is able to figure out where the box was initially. What I was hoping to figure out (and have been curious about this for ages now) - how would I go about storing the initial coordinates that the boxes were (or any initial timeline variable) and then animating back to them should I wish. The main point of this would be that in some instances I don't want to do an exact reverse of the timeline that has initially fired, but to still reference some of the data from the timeline. Hope this makes sense to the wizards on here. Thank you.

Thank you both so much for your awesome replies. Jack - I can't believe it was that simple as this has nailed what I was trying to do. Rodrigo I managed to get your second one to work well too! Thanks guys.

I think you can get the right solution by playing around with the percentage settings in drawSVG but i'm not exactly sure.

Bit of a hack but you can rotate the circle http://codepen.io/olichalmers/pen/KrZwZK

Hi all, In my codepen attached I have each box randomly positioned, and then I am running a timeline that staggers through from opacity 0, then a left or right movement, then goes to opacity 0 again. At the moment this is staggering through, but what I want is for each box to run as their own timeline and in sequence. So I want the first one to fade in from 0, move it's "cover", then fade out to 0. Then the next one would do that same animation. I attempted to use an each function but couldn't seem to get it to work right. Any solutions? Thanks, Oliver

Just thought i'd post in here to say I found Petr Tichy had answered my exact question in one of his tutorials. Thanks Petr. I think what I had wrong was the triggerElement call.

Hi all - I know there are some keen scrollmagic'ers on here so thought it ok to give it a post. The problem i'm having is setting up multiple instances of Scrollmagic using an each statement. In the attached pen they all seem to be following the one call instead of their individual states. Any pointers kind folks?

Rodrigo thanks for the excellently explained response. And thanks again Diaco. Awesome work guys.

Delightful, Diaco. Thanks a lot. I wasn't aware of a clear() function in GSAP. Is this all it's taken to solve this? Kindest regards, ochalmers

Hi all, I'm currently working on an expanding module box that I want to be able to drag through it's container. I've managed to get most parts working as I want, but the problem i'm running into is with the positioning once you've opened the module then dragged it somewhere else, then open it again. If you see my codepen, you'll see that once you click the open button the box works as it should by centering the module from it's position then sizing it to fit the screen. Once you close it, it then goes back to where it was before which is perfect. What happens next is my issue as you move the box to a new position and click open it works from it's old starting point. Do any of you wizards have a technique as to how i'd save the position it is in once clicked so that every time it would work from it's starting point? Thanks for reading.

Haha, same here @NDF. This is exactly what I was looking for.

Jack - you are a star, thanks so much for this. Quick question - what is the reasoning for the if statements that sets the x and y to 1 / 0 ? Thanks again - this is perfect and exactly what I was after.

Hey guys, Thanks for getting back to me. I have significantly slimmed down the codepen demo now to illustrate the effect i'm after. What I want to be able to do is to use the browser window to map the positions of the container div and then navigate to that part of the div. So now I have it as only one image (i've set the width to 150% of the browser window, but this could be anything). The idea would be that you would be able to see the bottom right of the div (or in this case an image) by hovering your mouse to the bottom right of the browser window. If you held your mouse in the direct middle of your browser window you'd be in the direct centre of the div or in this case the image. I suppose this is more of a maths based question than a direct GSAP question, but I was hoping some of you kind fellows would be able to assist in any shape way or form. Maths is not my strong point! Best, Oli

Hi all, i'm attempting to build a gallery that is able to be navigated by hovering around your browser window. The idea would be when you hover in the top right of the window you see the upper right chunk of content, and similarly if you hover in the bottom left you'd see the bottom left chunk. You can see the effect working to a T here - http://www.jakobdeboer.com/gallery/series/ . Attached is my codepen which has the basics of it working but it really seems to dislike working within anything larger or smaller than the current 200% given to the container wrapper. I was hoping a fresh pair of eyes may be able to shed some light on what's going wrong with my prototype?

Hey Jonathan, Thanks a lot for your epic reply The only reason i'm using jquery animate in this instance is because i'm using snap.svg to morph the paths of the SVG behind the menu. I am going to explore using the latest version of GSAP to animate the paths instead though. I seem to have missed the update All the best, Oliver

Sahil, thanks for your reply. Within that stackoverflow post there is a response saying you can trigger "mouseleave" which seems to have done the trick.

Hi all, In the codepen attached I have a menu prototype that i'm building. As you can see there are a few actions on the hover state of the red open / close button. I have a timeline firing the circles behind the actual hit state and a separate action firing the SVG path state. The thing that's really bugging me and i'm at a serious loss to figure out is that once you click the open button and the timeline to open the button fires - the hover state stays in the position the button was originally (unless you move the cursor then the SVG goes back to it's normal state and the timeline to show the circles reverses. I'm not sure this is directly a GSAP question, but if any of you kind souls could please assist me - i'm going crazy here! Cheers

Awesome, thanks a lot guys!