Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mikel

For all BANKSY fans

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,


For all Banksy fans here the version a la GreenSock.
It's a fork of a pen by Lee Martin, who reacted super fast.

 

See the Pen BqpJQj by mikeK (@mikeK) on CodePen


I like the art of Banksy. But I have not taken his original work.
Otherwise this pen would definitely be hacked.

 

Have fun ...

Mikel

  • Like 4
  • Haha 3
Link to comment
Share on other sites

Brilliant .. i love how Bansky keeps sticking it to the art establishment :)

  • Like 4
  • Haha 1
Link to comment
Share on other sites

Hi @Jonathan,

 

Yes, the Banksy approach is the proper reaction to many problems.

 

So it would be helpful if I see myself in the mirror in the morning, it would be banksy-ed.

 

See the Pen aRJXBx by mikeK (@mikeK) on CodePen

 

Let's shred ...

Mikel

  • Like 3
  • Haha 2
Link to comment
Share on other sites

  • 4 weeks later...

Hi Banksy fans,


What has happened there? How was it done?


I looked at a couple of videos from the auction. Suddenly I spotted EGON using his cell phone.
When I asked him what was going on, he revealed to me that he had received a black message to answer with a special code while standing close to Banksy´s work, “Girl with Balloon”.
.

It took a while for me to be able to reconstruct everything.

EGON had to learn to walk. Mmmmh - not he, I had to learn it! Especially that he is always there where he should be. Even if the IPad tips.
After some suggestions from this forum (thanks to @OSUblake , @Carl, ...) here's the case (live view?

 

See the Pen LXEwpw by mikeK (@mikeK) on CodePen


Now I'm sure the secret is a special green code based on a stepped wiggle.

 

I still experiment with the speed factor. What I definitely do not understand: Why does EGON accelerate like that in the end?

 

Best regards

Mikel

 

 

 

 

Link to comment
Share on other sites

First, one of GSAP's most important features is its ability to help people create animations that tell stories. Your work certainly excels at that. Great job!

 

The reason EGON moves so fast at the end is that he is moving a great distance in a short amount of time ;)

 

I know you know that, but now we have to consider why is the time so short and not longer for the big distance he has to travel.

 

I have to admit I'm having trouble deciphering the walk() function. I see it takes a target parameter, in GSAP the target is the thing that is being animated, but it looks like you are passing in numbers like

 

walk(0.1)

walk(0.001)

walk(0.25)

 

its ok, to use your own target variable and be number... I just don't know what those numbers represent.

 

I also noticed that you are getting the start value by doing

 

start = egon.offset().left;
console.log("start = " + start)

 

 

If you log it out start you will see that it is always the same. 

In order to get the distance and speed I think you need to know egon's current position and where he is going to when those tweens are created.

 

I think it will take a bit of tinkering, so hopefully this helps you or someone else get into the proper solution.

 

Again, great job on the animation!

  • Like 4
Link to comment
Share on other sites

2 hours ago, Carl said:

If you log it out start you will see that it is always the same. 

In order to get the distance and speed I think you need to know egon's current position and where he is going to when those tweens are created.

 

I just quickly looked at your code, but that's probably the problem. You're calculating the position at the very start for all the walk calls. By referencing a function without parentheses, it will be called later.

 

// called immediately 
.add(walk(1.1), "-=0.5")

// called later
.call(walk, [1.1], null, "-=0.5")

 

  • Like 4
Link to comment
Share on other sites

Hi @Carl,

Hi @OSUblake,

 

It was an attempt to calculate the 'coordinates' depending on the window width.

 

I use the target parameter as a factor to define the respective endpoint in terms of:   var end = ww * target

 

var dist = end - start;
      if (dist < 0) {
        dist = dist * -1;
      }
var time = dist / speed; 

 

What I have not checked is that the start value is not updated - after every walk.
Unfortunately, my simple attempt with an onComplete does not solve it either - here reduced my battle with the vars:

 

See the Pen YRqrVX by mikeK (@mikeK) on CodePen

 

Best regards

Mikel

 

 

Link to comment
Share on other sites

Hi ,

 

Now I could get the coordinates (start, distance, time) updated.
But the resize concept does not work anymore.

 

See the Pen XydwQw by mikeK (@mikeK) on CodePen

 

You can not have everything ...

 

Best regards

Mikel

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×