proof-of-sock

Thanks so much... https://codepen.io/mldyu/pen/dyWNYBm I went to using webGL and playing around with pixi.js. Guessing all I need to do now is pass a reference to gsap's timeline. It's just one uniform time that's making all the animation happen. I wonder how scroll trigger would operate if the height is fixed to 100vh. Does the scrolltrigger callback get called if there's technically no scroll?

Right this is my attempt to get rid of the for loop, and make it properly infinite... https://codepen.io/mldyu/pen/OJmRGbV Went back to the older method with what Blake had shown me, and fused the two together. (Page starts creating circles after two panels) Chucked the logic to add scroll triggers inside the the createCircles, and passed in reference to section/panel to trigger it. And also got rid of the loco scroll. I swear I'm just one line of css or pin away from nailing it. If I change .section 's position to absolute I get the layered effect or svg's position: fixed.

You absolute MVP Blake! You really didn't have to go above and beyond in helping out here. I started feeling bad about being a pain to you lot, so I've subscribed to the club for a year to show my thanks/appreciation. I think I've nearly got the effect now, but even as it stands it's so visually charming, thank you so much for helping em push through with it: https://codepen.io/mldyu/pen/RwVGxWz I think the tunnel effect is there if the svg circles are fixed using 'position: fixed'. I think this is where I'm confused whether to use pinning here. Also this is for no reason in particular, I'm just researching different or odd ways to use a website. Happy for you to add to examples if it cuts the mustard when it's finished, you did the heavy lifting! I feel like it's the other direction, we have left/right UI, Up/down, I feel like forward and backwards are the unexplored directions! Faux 3d sort of idea.

Again you are a legend. Tried a few of the suggestions and got into page unresponsive. I am editing from a greensock example the infinite scroll one, it's just I might be pushing myself beyond my own abilities in trying to execute a particular 'tunnel' type effect. I think I've got the crux of down. If I could hazard a guess now what's going on it's setting the scrolltrigger on svgs that are still loading, causing the hangups/issues. I think the for loop inside the onUpdate call just clogs everything with high numbers. And I'm not sure I'm scrubbing anything. https://codepen.io/mldyu/pen/YzVGPoq I'll probably chuck this in the bin 2moro, I'm at fatigue point with it and keep on keep on getting pages unresponsive

You are an absolute champion. Apologies for not saying thank you sooner. I thought I would have figured it out with that piece, and have something cooler to share! So close though... https://codepen.io/mldyu/pen/PomGwYw I def think I'm getting a better grip of the plugin from these explorations. Still some user error on my part with scroll triggers, guessing I should not nest a gsap function call inside that createPanel call?! I dunno if adapting/hacking the infinite scroll example was the best idea now! Reading through the documentation I found static batching, wondering if that's a better way that going..: const circles = gsap.utils.toArray('#circ'); circles.forEach(circ => do stuff Not quite a tunnel, but saved this as it I think it's quite a cool look: https://codepen.io/mldyu/pen/dyWXEdv

Hi, Trying to progressively instantiate objects with each new page. I've used gsap to set attributes on a procedurally generated circle. Looking at the console the svg element and circle gets created, but with area of zero for some reason. Or I'm just making a placeholder with the name svg and circle each time? I can see gsap is setting the attributes, but I'm not 100% sure I'm creating an actual circle and instead just making a container named these things. Or it works and I'm just not setting the circle x/y. I really don't know what it going wrong, I thought I had the bits of code right The idea is make a tunnel type website. I've got a plan of how to mash the two together. But need to figure out if it's even possible to instantiate these circles like this!

I will do, I just started again from your code as a clean slate... https://codepen.io/mldyu/pen/LYyGjLN When you say check the closing tags, do you just mean the "pin: " is not set to anything? It's just set to true, having played around with yours I see it's got pin: '#svg', could that equally be the container like pin: '#section.small' and just trigger start/end based on entering into that specific container. I've definitely said this before, but I think I've nearly got it! The confusion part is started to ebb away thanks to your help! I'm gonna re-read the documentation and see if I can find a decent video on using greensock/scrolltrigger, see if I can glean any insight there! The whole exporting from ai properly is dream now thank you so much, I'm so excited to create some really weird websites!

You legend. thanks for the replies. "Then you export those shapes as SVG markup and then animate with GreenSock." I have been doing that, but just unsure of the correct way of exporting from .AI illustrator. Is it inline style, or internal CSS is should use? Thank you so much, I think I'm really close with it now, and getting a better grasp on scroll trigger. But still circling around the same problem, pinning something dead center, and progressively expanding scale based on scroll position. Just feels like i'm still going down a page: https://codepen.io/mldyu/pen/vYmLxGy

Thank you so much for the quick reply, and confirming what I had thought. I've been using inkscape for years for laser cutting, and last month been playing with Illustrator, but I didn't realise you could create animations inside .ai. I will have to look into it, what you describe is workflow I had been using/learning. I had imagined a workflow with .ai and xd as I saw the greensock stuff works inside there, so that might be a better place to plan out complex interactions. To be fair I just want something pretty simple, so I just started playing around with pure css to make the shapes instead:https://codepen.io/mldyu/pen/yLbeVxa Just a bit stuck at where i was before, trying to scale up an object. The idea is to make a tunnel effect using triangles. So progressively scaling or moving a card in the z direction. I think I'm a potatoes throw away!

I've been studying other people's codepens and found their code much simpler than my own. So I think I'm missing a step here... take for example: https://greensock.com/forums/topic/24441-scrolltrigger-not-working-with-svgs/ The js code is very simple and just scrubs through animation of a phone case unfolding. How exactly is that svg made? It looks like it contains the transform and translate inside the <svg>. The description for the animation seems "baked in" to the svg file, and all that's happening is the animation is being scrubbed through. But I'm been struggling to find any definitive answers, ie how to properly, or optimally prepare an SVG to export for use with scrolltrigger and co. Overall I'm trying to make a tunnel effect using basic shapes: https://codepen.io/mldyu/pen/wvdMoKN I did consider using masks, but I just want to understand how to optimally create/prepare svg animations for use with scroll trigger. Am I missing an obvious tutorial that covers this?

ok so I may need to circle back here and ask you for a bit more specifics on all these minor details, zoom level isn't something i'd considered at all. overall intention and reason for learning this library is to make interactive web experiences, and with a little bit of js experiment how to push these into websites into games. Massively love the fact I can animate svg's with greensock, and no pixelation, so I'm over flowing with creative possibilities. I thought using this library would take care of the compatibility side of things, so hadn't really considered things like zoom levels. Trying to work out how to make a point and click game in the browser and have greensock do the visual heavy lifting, but maybe I'm being a little ambitous!

that's brilliant if I add it to the pen from akapowl with only loco: section { width: 100vw; height: 100vh; background-color: rgb(136, 57, 83);; margin-top: -2px; // this solves everything display: flex; flex-direction: column; align-items: center; justify-content: center; } that solves the pixel line I think!

dayym: https://github.com/locomotivemtl/locomotive-scroll/issues/97 it's a rounding error thing? or maybe it's not the same issue, the video is gone from the example. The quote from the site "It happens because of half-pixel computation by browser of the translate value applied to the sections. I find out better results with value rounded to 2 decimals instead of 3. Even better if only one, or none, but I can't tell if the translation is as smooth as it should then."

I think I found greensock yesterday! And loco today! This particular tech is all incredibly new to me! Which is a testament to how robust and well it's made! I have to admit to some user error there, it was a last minute change where I thought, maybe this will fix it. Obv my intuition was off! I will totally have a dig over on github and hope that there's answer or easy fix. If I find something I'll report back for easier searching to weary wonderers.

thanks for checking in. I will get there eventually. I'm still a bit confused about a few things, but I'm sure I'll figure it out. I'll circle back here in a few days if I get really stuck, but I think I'm a few sleeps away from it all clicking and becoming 2nd nature

thanks for the feedback. I'm a bit confused how I'd overlap the css backgrounds, maybe there's a z property. It does seem a bit like z culling/classhing like in games engines. Here's the code pen: https://codepen.io/mldyu/pen/ZEePVPG

I'm just playing around trying to get things working, noticed an oddity when using scroll trigger with locomotive. There's what seems like a one pixel gap, or interpolation error between slides. The pixel line goes away after the loco scrolling has stopped, seems worse on cards that are the same colour. Is there any way to avoid this using pinning? https://arcaudio.github.io/index.html

ok I think I've almost got it, just in reverse to what I want: https://codepen.io/mldyu/pen/vYxPRqX If anyone else has issues with exporting svg from illustrator to use with greensock, make sure you check responsive in the svg export as.. dialog.

Hey I'm wondering if you could do it with scrub and toggle actions instead. And duration is linked to your velocity. I could be speaking out my arse, as I only found green sock yesterday, and can't even figure out my own problems!

So I have a set of circles made in illustrator. I've them in a group called stagger1 which fades/eases them into existence when the page is first loaded. I've been playing around with scroll trigger trying to figure how to do the next part. The steps would be lock the container with the circles inso it's always in line with scrollbar/viewport. When scrolling occurs I'd like to scale the whole lot of circles up. I think this is along the lines of what I need: gsap.from(".scrolltransition", { scrollTrigger:{ trigger: '.scrolltransition', markers: true, // scrub: true, // pin: true, start: "top center", //end: "top 10px", pin: true }, scale: 2.9, duration: 1.2, }) Last night when playing around I couldn't get any scaling of the circles, so my question is, is there a specific way to export the SVG's that i'm missing? Should I enable responsive in the export dialog of illustrator? (I didn't before) This was the class name as well: class="scroll stagger1 scrolltransition" First I'm trying to scale them all up, before attempting to scale individual circles in groups. The idea for the website is that you go deeper inside, instead of down. Kinda like into the rabbit hole. I'm making for an artist who wants something slightly off the beaten path!