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.