Instantiating circles via gsap.set

[proof-of-sock]

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!

See the Pen xxdVwPa by mldyu (@mldyu) on CodePen

[OSUblake]

SVG elements have to be created with a namespace.

const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

 

[proof-of-sock]

21 hours ago, OSUblake said:

SVG elements have to be created with a namespace.

const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

 

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... 

See the Pen PomGwYw by mldyu (@mldyu) on CodePen

 

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: 

See the Pen dyWXEdv by mldyu (@mldyu) on CodePen

 

[OSUblake]

10 minutes ago, proof-of-sock said:

guessing I should not nest a gsap function call inside that createPanel call?!

 

Nothing wrong with that, except you're creating a bunch of panels in your update. Eventually it's going to start slowing down. 

 

14 minutes ago, proof-of-sock said:

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..: 

 

Batching is more for when you have grid-like content. I would just create everything up-front.

 

// create 20 panels
for (let i = 0; i < 20; i++) {
  createPanel();
}

 

And check out the demos page. There are several examples with infinite scrolling.

 

markers and pin would go in the scrollTrigger object, and true should not be a string.

 

gsap.to("#c1", {
  scrollTrigger: {
    trigger: "...",
    start: "...",
    markers: true,
    pin: true
  },
  scale: 2,
  //pin: true, 
  // markers:'true',
  duration:'2',
});

 

Easy random colors...

const randomColor = gsap.utils.random([
    "#F9E445",
    "#E6B074",
    "#CC4461",
    "#72316f",
    "#311569",
    "#F9E46e",
    "#E6B05f",
    "#CC4473",
    "#723168",
    "#311572",
    "#F9E464",
    "#E6B06c",
    "#CC4475",
], true);

gsap.to(target, {
  fill: randomColor,
  stroke: randomColor
});

 

 

[proof-of-sock]

27 minutes ago, OSUblake said:

 

Nothing wrong with that, except you're creating a bunch of panels in your update. Eventually it's going to start slowing down. 

 

 

Batching is more for when you have grid-like content. I would just create everything up-front.

 

// create 20 panels
for (let i = 0; i < 20; i++) {
  createPanel();
}

 

And check out the demos page. There are several examples with infinite scrolling.

 

markers and pin would go in the scrollTrigger object, and true should not be a string.

 

gsap.to("#c1", {
  scrollTrigger: {
    trigger: "...",
    start: "...",
    markers: true,
    pin: true
  },
  scale: 2,
  //pin: true, 
  // markers:'true',
  duration:'2',
});

 

Easy random colors...

const randomColor = gsap.utils.random([
    "#F9E445",
    "#E6B074",
    "#CC4461",
    "#72316f",
    "#311569",
    "#F9E46e",
    "#E6B05f",
    "#CC4473",
    "#723168",
    "#311572",
    "#F9E464",
    "#E6B06c",
    "#CC4475",
], true);

gsap.to(target, {
  fill: randomColor,
  stroke: randomColor
});

 

 

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. 

 

See the Pen YzVGPoq by mldyu (@mldyu) on CodePen

 

I'll probably chuck this in the bin 2moro, I'm at fatigue point with it and keep on keep on getting pages unresponsive

 

[OSUblake]

Here's some changes. When you start repeating yourself, it's probably time to put it in a function. You only need to use the attr plugin for stuff that appears on the element, like cx, cy, r. Number values and true/false should not be wrapped with strings. Only use strings for stringy stuff, like words.

 

See the Pen BaRLNJx by GreenSock (@GreenSock) on CodePen

 

Not sure about locoscroll. Seems a little off, and it's not a GSAP product so we can't officially support it.

 

This only uses gsap. Notice that it has a certain html structure.

 

See the Pen gOgWELo by GreenSock (@GreenSock) on CodePen

 

[proof-of-sock]

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: 

See the Pen RwVGxWz by mldyu (@mldyu) on CodePen

 

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.  

[proof-of-sock]

Right this is my attempt to get rid of the for loop, and make it properly infinite...

 

See the Pen OJmRGbV by mldyu (@mldyu) on CodePen

 

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. 

[Cassie]

Super jazzed to have you onboard @proof-of-sock 🥳

[proof-of-sock]

On 7/12/2021 at 10:33 AM, Cassie said:

Super jazzed to have you onboard @proof-of-sock 🥳

Thanks so much... 

 

See the Pen dyWNYBm by mldyu (@mldyu) on CodePen

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? 

[OSUblake]

28 minutes ago, proof-of-sock said:

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? 

 

If there is no scroll, you would need to do it another way, like listening for wheel events.