smallio

Hi All, Attempting a slider here & stuck on two parts. I'd like a mask to cover the slides as seen below. Got it working the first time when you click up however it seems to break after that. Just getting my head around incrementing and decrementing with multiple objects, so any help would be greatly appreciated - A smaller problem is seeing the slide fade out on the side in my version. I guess fixing the mask would stop that problem? Cheers, Smallio P.S. My version is the second one down!

@PointC Ah love it dude!!! Thank you so much

Ah this is almost exactly what I was looking for! Thank you! The problem is that I need them to bounce back and reverse direction so they are not hidden for so long (see the 10 second the Vimeo video). When I try and attempt this it ends up being a mess because the animation hasn't finished going down and then glitches up. Is there anyway to make it reverse back up without changing the actual time of the action? @PointC

Hi @mikel I actually managed to find a way round it with another function thanks to your idea. However that brings me to another question. How can I make this work dynamically without just copy and pasting & changing the names? I also have this little glitch when I do this in my full site. Any ideas how to stop that? https://vimeo.com/277655093 Thanks

Hi guys, I'm trying to make a hover effect multiple menu items (just one to start in the codepen taken from a big project). I want the text to drop down then pop back up on mouseover, as apposed to drop down on mouse over then come back up on mouse leave. I've googled the problem and found a few threads & it seems the problem is passing params through. The attached image is the console errors I get in the project which is too big to put in a codepen. However when I take a snippet out the errors change. Very frustrated with this... Any ideas lol? Here is the thread with the same problem - https://github.com/greensock/GreenSock-JS/issues/119

@Sahil Duh.. how did I miss that?! Thanks

Hi guys, I'm struggling to get scroll magic & multiple timelines to work together. The first timeline plays but the other 2 seem to start out of view. Checked this against a few examples and it looks pretty much the same but all I can find are tween examples. If anyone can see the problem here that would be fantastic. Cheers, Smallio

Wow. thank you @Sahil! I've been trying to figure this out for days! So excited to learn from this & implement this in my new project

@Sahil Sorry for the delayed response, been afk for a few days. I realised I somehow linked you the wrong pen & have subsequently deleted the most recent one ... hence why the draggable wasn't doing anything lol. I think I confused the situation a lot when explaining it before. I love your example & it's really close to what I'm trying to (I like the little progress bar as well ). The thing I really can't understand is how to use draggable to lock onto each slide. The example below shows almost exactly what I'm trying to do. For example - Say there are 10 slides You're viewing the 4th slide (the dot is at 40% across the line), and as you drag the dot to the 5th slide it locks to the 50% mark across the line along with the 5th slide now in view. Does that make sense? Here's it dragging but without it locking to slides: I also tried on your example but it makes the line bigger as the progress goes on instead of moving the dot to the right place. It divides the grey line at the bottom and each slider fills the percent and locks. Instead of doing that I just want a small circle or square that sits on that line and locks to the slide percentage. Slide 1 = 0% Slide 2 = 10% Slide 3 = 20% etc... Cheers, Smallio

So as mentioned in a previous post, I'm following the advice @OSUblake & have been taking apart projects to try and learn as much as possible. My focus is creating a really nice slider that can be updated and made more complex as I learn. I'm not quite confident enough to make from scratch with GASP, so I'm using a friends Flickity logic for the slider & slowly converting it over. My goals were to learn how to: 1. drag slides & lock with a natural feel (✓) 2. navigate with touch/swipe & arrow keys (✓) 3. use mousedown to scale slides down for easy navigation (✓) 4. use count up to change numerical data on slides (✓) ♥ to @Sahil for the crazy example! 5. drag a horizontal scroll bar at the bottom that locks to each section (×) I just can't get my head around number 5. I managed to make it work seamlessly with the GASP draggable knob, but I'm really obsessed with learning how to make a horizontal scroll bar correspond with a slider with draggable. Here's the example I'm trying to recreate (found on the Greensock example page) - http://thieb.co/works Or a lil' GIF for the busy folks Searched the forums/codepen/deep space for examples of this & no cigar yet! Has anyone seen any examples of this with GASP that aren't buried in super complex websites? Best, Smallio

My bad, I did kinda think that... just thought my example was close to what he was trying to do. Your word is my command lord @Sahil, new thread coming up

lol @Sahil you're a master... brilliant work

@PointC is there anyway round this behaviour though? I like your idea of a timeline method but you can't reverse or it will just draw it the other way. It would be cool if there was a way to force it to to complete the full circle draw every time, then use onComplete to call a function from the mouse leave that does the same thing but with the other draw SVG params to make it pull back from the start vs just play & reverse. Going to give it a try later

@Noturnoo Maybe this will help? You can change friction & selectedAttraction to get the effect I think your looking for (view it on codepen or it cuts the bottom off).

Thanks @PointC & @Carl respectively I thought this might be the issue. Had a brain fart and somehow didn't think about using fromTo tweens, lol. Ah the joys of 2am developing Thanks for clearing that up for me guys & also glad to have highlighted a possible issue with the small stroke, that was definitely adding to the confusion (along with it looking like the opacity was changing if you hovered quick enough). Hope it's an easy fix for ya Carl!

scrollmagic is fantastic

Small issue with my circle here, it works the first time on hover (in & out) and then changes direction. Any ideas why it breaks after the first hover? It should look like this. Many thanks, Smallio

I feel like I'm a parrot at this stage just repeating thank you to some of you guys, but seriously, THANK YOU!!! You don't even know how much I appreciate the contributions. Things like this can take hours for a noob like me to figure out & being able to see stuff like this is totally invaluable. Gratz on mod status & Superhero as well btw.

Once again, thank you @Sahil & @OSUblake!

Oooo nice idea!!! I'll see if I can implement that

I'll do the same for the k/m and that should work perfectly!

Spot on @Acccent thank you!

I've done most of the hard lifting here, instead of going +5 or -5 I want to be able to cycle through a list of numbers with no correlation to each other- var numbers = ["330", "477", "20", "128", "8"] Preferably I'd like to count up/down between values in the thousands/millions, so a big bonus would be to represent them with a k or and m at the end. For Example: var numbers = ["330", "477", "20", "128", "8"] var values = ["k", "k", "m", "k", "m"] But outputting like: (number, value) or 330k, 447k, 20m etc... I've stripped down the example to like 20 lines of code to it's easy to see what's going on. My guess is I'd have to do the k/m separately and output in a separate field next to it, if there's an easier way I'd love to know though! Cheers, Will

Hey Kim, Welcome to the forums I'm still relatively new to greensock but I've been designing for as long as I can remember. I've come to believe the two are actually very symbiotic. As @OSUblake said the other day on here. All the best developers he knows have come from a design background (I believe also the Greensock team). As far as design process goes dribble is really incredible for me for a few reasons. People post progress of their work as they are going along & other people rebound them. It helps me see the process & I can deconstruct how things are made a lot easier. For me at least 80% of the things I make come from some sort of visual inspiration. From there it's really just a question of "can I code this from scratch?" No matter what the answer is here, I'll go straight to after effects/in vision/webflow & make a prototype. From here I have pretty much everything I need to start coding it, general idea of structure/easing/colours etc. If I'm still unsure I head to Codepen and see if anyone has achieved anything close to what I'm trying to do and reverse engineer it, as you're doing already! If you're still struggling at this stage you can post your progress on a forum and see if anyone has done something close or can help you towards understanding the hard parts. Absolute worst case scenario: It's too complex & you can save the idea for later, or try and render your animation from after effects using bodymovin & GASP together (super powerful combo)! I also recommend The Futur (they literally have a series called the process which talks about... you guessed it, the creative process). IMO this is the best channel on YouTube... I've learnt more on here in an hour, then I have in some days at university. https://www.youtube.com/user/TheSkoolRocks Finally here's a cool bodymovin' tutorial if you're interested in that as well - Hope at least a tiny bit of that was useful as I say I'm still a nublet. All the best, Smallio

Appreciate the insight & advice, very interesting to hear. Also just checked the pen again & saw show points ... very cool!