BennyTuner

June 15, 2021

Thanks Cassie

Yes, a codepen issue on all counts - probably codepen trying to monetise with buysellads being stopped (rightly) by CORS

I now know to add resources from scratch rather than fork the GSAP starter pen - less confusing!

June 15, 2021

The pen above has a reference error (gsap not defined)

try this one

See the Pen KKWbqEY by bennysutton (@bennysutton) on CodePen

it does at least drag drop

it is based on

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

June 15, 2021

Hi guys

I have a fun animation I'm trying to put on codepen

It works fine on my website https://www.bennysutton.com/rockstar.html

I tried the GSAP starter pens but both crap out due to CORS warnings

Loading failed for the <script> with source “https://srv.buysellads.com/ads/CKYDVK7U.json?callback=customJSONPCallback”.

and errors

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=410041. (Reason: CORS request did not succeed).

I only need jquery, gsap main and draggable - how would I create my own starter pen?

See the Pen OJprjOq by bennysutton (@bennysutton) on CodePen

April 1, 2021

I tell a lie there is some javascript just above the body closing tag - but it is for the cart - gsap is outside - will have a look tomorrow and move it anyway

April 1, 2021

I don't think that's it - look at page source - all inline javascript is at the bottom, after the body tag - only script file src tags between <head> thats standard isn't it? no javascript anywhere else

April 1, 2021

go to https://www.stockphotography.co.uk/photos

look in the console (Ctrl, shift + i --- you know that) and you will see it there

April 1, 2021

Hi, I get this error in the console - everything works though so not really bothered

Uncaught TypeError: Cannot read property 'ownerDocument' of null
    at n (Flip.min.js:10)
    at Function.register (Flip.min.js:10)
    at _createPlugin (gsap.min.js:10)
    at gsap.min.js:10
    at Array.forEach (<anonymous>)
    at Object.registerPlugin (gsap.min.js:10)
    at Flip.min.js:10
    at Flip.min.js:10
    at Flip.min.js:10

March 24, 2021

ah, thanks, that's how to do it - my knowledge of javascript is limited - same curly braces but another world!

any tips, broad strokes only needed, how to position the centre of the svg to the centre of the screen? transform origin 50% and halve the screen width I just found out with matchMedia?

March 24, 2021

Hi Guys

well I've got this far in a week - not too shabby for a C# guy learning gsap, svg, and animation as I go!

https://www.bennysutton.com/

svg's - grrrr... they don't play nicely with CSS

I'm tearing my hair out over positioning elements on top of and getting svg's to be responsive

You should see/hear on my homepage that the guitar amp lifier (svg) buttons play music (see javascript at bottom of page in browser code source view)- and the amp slides in to top of the cab - tricky stuff gsap makes simple

However, getting it to work portrait on mobile... the buttons are too small! I've got CSS media queries but debugging in the console is a nightmare and they still don't work after hours of trying.

So, finally, my question is this - only had a quick squint at match media from your leatest newsletter - might this solve my problems? It seems only for the scroll trigger? is there a hack to dynamically size my svg depending on screen width with gsap?

March 19, 2021

awesome

I'm all over it

March 19, 2021

cool!

is there any way I can get values to control another animation?

March 19, 2021

I forked the 'draggable knob...' pen to show you my problem

I can get my knob to spin but only on a corner!

I need it to spin on its center axis

:-)

See the Pen OJbeGvQ by bennysutton (@bennysutton) on CodePen

March 16, 2021

like in the song 'you say tomaytos I say tomartos' I merely meant many ways to skin a cat. Excuse me, I'm a c# guy so my javascript is like the drunk uncle at the BBQ!

March 16, 2021

27 minutes ago, ZachSaucier said:

That's ironic because the majority of the code in the demo I made is your approach I included both so that you can see how concise the method I suggest (secondMethod) is compared to your method (firstMethod). You'd need to replace my doSomething function with a hitTest in your case. All I was showing in the demo is how to use a loop to do the comparison like you need.

We don't have a name, but GreenSockers is something people have used occasionally in the past.

I'm curious which ones you're talking about. As far as I know, all demos have a purpose and most are used in these forums somewhere. You could search the forums for the pen ID and see a related thread in most cases.

If you're looking for pens to learn from, check out the GreenSock collections or the hearted pens.

potatos potahtos!

28 minutes ago, ZachSaucier said:

I'm curious which ones you're talking about. As far as I know, all demos have a purpose and most are used in these forums somewhere. You could search the forums for the pen ID and see a related thread in most cases.

go to https://codepen.io/GreenSock

find a pen, mouseover and you see a cross appear top r, click on it and the pen appears center screen. There are scroll tabs right and left - not very obvious - that's how I was going through them - it's a view you can't get to from a pen for some reason! it's a good way to scroll through though and I just noticed a load of pens pooped up with the TEMPLATE standard look - there were others that didn't work (or it wasn't obvious what they did or what you had to do to make them work). I found at least 10 that I would be proud to tweak for my sites. Does codepen allow ordering? CP is a great marketing tool for you I think :-)

March 16, 2021

thanks again Zak for taking the time to make a pen - though it looks like more code than the way I'm doing it

I still don't get it - hitTest returns a boolean so I don't see how it could be a variable? you have to ask it again and again until it says yes don't you?

Anyway, it's working for me so I'm a happy bunny

One thing as I find my feet with GSAP I've been scrolling through Greensock codepens to find great ideas and there are loads of empty pens that baffled me (and annoyed me if I'm honest), I now realise they've been made by you Greensockers (is that even a word for GS employees?) - might be a good idea to delete them (or use a second account) - no criticism - only pointing it out to be useful

I'm still on the learning curve but what I've seen so far I'll be taking a sub soon - excellent product - at last, another great jquery library as useful as bootstrap

March 16, 2021

Just now, BennyTuner said:

thanks Zach and Point C for your advice

I did try to refactor the code to be less verbose but you have to offer up the hitTest every time you test it so switch didn't work

The other thing to remember is that you are testing for the minimum coverage so you must test for the largest values first - if you tested for the smallest percentage first it would always break there - so unless anyone has a better suggestion I came up with this...


                if (this.hitTest(droppables[i], "100%")) {
                    console.log("100");
                } else if (this.hitTest(droppables[i], "90%")) {
                    console.log("90");
                } else if (this.hitTest(droppables[i], "80%")) {
                    console.log("80");
                } else if (this.hitTest(droppables[i], "70%")) {
                    console.log("70");
                } else if (this.hitTest(droppables[i], "60%")) {
                    console.log("60");
                } else if (this.hitTest(droppables[i], "50%")) {
                    console.log("50");
                } else if (this.hitTest(droppables[i], "40%")) {
                    console.log("40");
                } else if (this.hitTest(droppables[i], "30%")) {
                    console.log("30");
                } else if (this.hitTest(droppables[i], "20%")) {
                    console.log("20");
                } else if (this.hitTest(droppables[i], "10%")) {
                    console.log("10");
				}

easy, crude and effective!

March 16, 2021

thanks Zach and Point C for your advice

I did try to refactor the code to be less verbose but you have to offer up the hitTest every time you test it so switch didn't work

The other thing to remember is that you are testing for the minimum coverage so you must test for the largest values first - if you tested for the smallest percentage first it would always break there - so unless anyone has a better suggestion I came up with this...

                if (this.hitTest(droppables[i], "100%")) {
                    console.log("100");
                } else if (this.hitTest(droppables[i], "90%")) {
                    console.log("90");
                } else if (this.hitTest(droppables[i], "80%")) {
                    console.log("80");
                } else if (this.hitTest(droppables[i], "70%")) {
                    console.log("70");
                } else if (this.hitTest(droppables[i], "60%")) {
                    console.log("60");
                } else if (this.hitTest(droppables[i], "50%")) {
                    console.log("50");
                } else if (this.hitTest(droppables[i], "40%")) {
                    console.log("40");
                } else if (this.hitTest(droppables[i], "30%")) {
                    console.log("30");
                } else if (this.hitTest(droppables[i], "20%")) {
                    console.log("20");
                } else if (this.hitTest(droppables[i], "10%")) {
                    console.log("10");
				}

March 15, 2021

this works, bit verbose, will put it in a switch block

                if (this.hitTest(droppables[i], "50%")) {
                    console.log("50");
                } else if (this.hitTest(droppables[i], "40%")) {
                    console.log("40");
                } else if (this.hitTest(droppables[i], "30%")) {
                    console.log("30");
                } else if (this.hitTest(droppables[i], "20%")) {
                    console.log("20");
                } else if (this.hitTest(droppables[i], "10%")) {
                    console.log("10");
                }

March 15, 2021

I'm making an animation that allows users to drag a cloud over the sun which makes stuff dimmer - I've got something based on the above codepen working with hitTest. What I would like to get is the percentage overlap - I could test for values I suppose...

if (this.hitTest(droppables[i], "10%")) {
						onDrop(this.target, droppables[i]);
//value is 10
                    }
if (this.hitTest(droppables[i], "20%")) {
						onDrop(this.target, droppables[i]);
//value is 20
                    }
///and so on...

Ideally I'd like to get the value dynamically so that my dimming looks real - though I could fake it with an ease on drop I guess?

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

Notifications

Messages

BennyTuner

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by BennyTuner

Difficulty getting GSAP Starter pens to fork on codepen

Difficulty getting GSAP Starter pens to fork on codepen

Difficulty getting GSAP Starter pens to fork on codepen

Silent Error

Silent Error

Silent Error

Silent Error

matchMedia

matchMedia

spinner not spinning!

spinner not spinning!

spinner not spinning!

does anyone know how to get the overlap property?

does anyone know how to get the overlap property?

does anyone know how to get the overlap property?

does anyone know how to get the overlap property?

does anyone know how to get the overlap property?

does anyone know how to get the overlap property?

does anyone know how to get the overlap property?