[Burger Menu with ScrollTrigger and ScrollSmooth]

This is perfect! thanks so much for all of your help Jack & Rodrigo!

 

[Burger Menu with ScrollTrigger and ScrollSmooth]

Nice one, thanks so much.

Ok gotcha! And the data-link is the same as the class! i.e. data-link=".one"

 

Just a few further questions sorry:

 

- Can i change the order of the menu closing? i.e. The menu closes and then scrolls to the relevant section.

- If i open and close the menu without clicking on a menu link the browser won't scroll.

- Once the menu item is clicked the nav loses it's fixed position.

 

Again, thanks for all the help.

 

Cheers,

Phil

 

 

[Burger Menu with ScrollTrigger and ScrollSmooth]

That's perfect! Thank you.

Just a question, how does it know which section to go to?

 

Also, do you know how to 'close' the menu once a link is clicked? i.e. Reversing the menu opening sequence with the 'burger' to 'cross' animation.
Would this need to be in a timeline?

[Burger Menu with ScrollTrigger and ScrollSmooth]

Hi!

 

New Shockingly Green member and diving in the deep end with ScrollTrigger and Scroll Smoother amongst other things.

I'm trying to create a burger menu that opens up a nav, reveals a link and then once clicked closes the menu and scrolls to the corresponding section.

 

All good so far with the burger animation and the scroll trigger square in section three.

I'm just a bit stuck adding the menu link and integrating the scroll smoother action.

 

Sort of like the 'Jump to C' button behaves in the ScrollSmoother example.

 

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

 

Thank you, any help is much appreciated.

 

Cheers,

Phil

See the Pen QWBwdQq by phillipanthonyvale (@phillipanthonyvale) on CodePen

[Greensock Lightbox with Youtube Embed]

Thanks @mvaneijgen, still a bit of a newbie i'm afraid so really appreciate the help and advice.  

[Greensock Lightbox with Youtube Embed]

Hi everyone,

I have tried to create a lightbox style Greensock animation complete with a Youtube embed.

Only thing i am having trouble with is when i hit the CLOSE button the video keeps playing.

From what i can tell reading forums the Youtube API changes frequently. A recent post i found mentioned to included the following in the closing code:

 

$('#moviePlayer').each(function(){this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')});

 

As well as adding enablejsapi=1 in the iframe of the actual embed.

 

Any help is much appreciated.

Cheers,

Phil Vale

See the Pen KKReXRW by phillipanthonyvale (@phillipanthonyvale) on CodePen

[Greensock Loader + Background Image Change]

Thank you so much for the help Jack. I have a lot to learn.

[Greensock Loader + Background Image Change]

Hi,

 

I have a div with changing .gif backgrounds working but when i run it on a live site the gifs glitch or don't play because the gif aren't preloaded i'm guessing.

 

To break what i'm trying to achieve into steps it would look like:

 

1. Loading animation (3 squares fading in) while gifs are preloading.

2. Loading of gifs completes and loading squares finish with all three visible.

3. #main div fades up with preloaded gifs playing.

 

Any help is much appreciated, thank you.

 

Phil

See the Pen jOzMNry?editors=0010 by phillipanthonyvale (@phillipanthonyvale) on CodePen

[Greensock Background change]

Amazing, thanks so much Cassie!

 

Just a quick question. What happens to the gifs when they aren't showing are they still playing in the background?

 

OR does the .set function sort of turn them off?

[Greensock Background change]

Hi,

I'm trying to get a background image .gif to change from one image to the another.

I want the animation to change from Homer to Leo and repeat endlessly.

 

I'm just after a straight cut in the transition so i thought .set would do it rather than a .to or .from with opacity etc.

 

Thanks for the help,

Phil

See the Pen jOzMNry by phillipanthonyvale (@phillipanthonyvale) on CodePen

[Animated png sequence]

Oh man, thank you Jack.

 

So i only need the x: -600 because i don't need to count the first frame. And i don't count the first step so the config is (2).

[Animated png sequence]

Hi everyone,

 

Just trying to get a simple 3 frame animation happening with this dancing girl as an example to be used in an MREC.

 

It's working perfectly except for the end of the animation where it flickers off.

 

I would like it to play all 3 frames and then return to the start to play again.

 

Any help is appreciated!

 

Thank you.

See the Pen GbmBZR by phillipanthonyvale (@phillipanthonyvale) on CodePen

[Greensock Loader & Vimeo]

Hi there,

 

I am trying to have a loading circle play until the other content on the page has loaded (mainly an iframe displaying vimeo).

 

Once that happens the loading circle should fade, the logo play and the vimeo iframe begin.

 

Any help would be greatly appreciated!

 

Phil

See the Pen NdpprQ by phillip_vale (@phillip_vale) on CodePen

[Greensock Lightbox with Videos]

Hi Dipscom,

 

Thank you so much for your help.

 

The end result will hopefully use alot more greensock once it is on a website and i would like to eventually have the videos scrolling through once the lightbox is open so this is awesome help.

 

I was hoping to use divs as the links though. Is this impossible because we need the child nature of a list? 

 

This is probably moving away from a greensock forum now but is there a way to match up the amount of .item divs to the videos?

 

Is this where i would start?

 

var x = document.getElementsByClassName("example");

 

Cheers,

 

Phil

[Greensock Lightbox with Videos]

Hi,

 

Is there a better way to do this? I want to load about 15 different videos all up for a portfolio type site.

 

Any help is appreciated.

 

Thanks,

 

Phil

See the Pen YWoVyv?editors=1000 by phillip_vale (@phillip_vale) on CodePen

[Unfolding div]

Thanks so much for all the input. I was asleep while all of this was happening! I probably could have described it better, i was talking about a flicking not a flickering and the snapping is a much better description. All of these posts are brilliant. I might push further in the project and post again soon. Thanks all, Phil

[Unfolding div]

Hi there,

 

I am trying to make 3 divs fold out from under one another and was going quite well until i noticed that the divs are sort of flickering when they get to the end of their transitions. Any help is appreciated!

 

Thanks,

 

Phil

See the Pen jAmEgb?editors=0100 by phillip_vale (@phillip_vale) on CodePen

[Using drawSVG to Dynamic points]

Hi all,

 

Trying to animate a line between 2 random points inside a circle using drawSVG. That is the end result i am hoping for.

 

But this is a learning experience so doing it bit by bit.

 

However, i am now stuck. I can make the points appear (currently limited to 2) but would like to animate them in on the pointsTL timeline rather than using the pointer.appendTo("#circle").fadeIn(x);.

 

I put an example in the top left to show what i am trying to achieve but happy for direction to get back on track at the moment in terms of setting up the gsap timeline.

 

Any help is appreciated!

 

Phil

See the Pen beerNe?editors=0011 by phillip_vale (@phillip_vale) on CodePen

[Dollar Counter]

Hi,

 

I am trying to make a counter. The namings might seem a bit weird but they are specific to another project that this is for.

 

Basically, once it is in it's final place the activeIndex will be determined by a slider.js that i have running.

 

Once the activeIndex == 1 or 2. it should set a number 49 or 70 that the count() function will count to.

 

Any help would be great!

 

Thanks,

 

Phil

See the Pen zBGLzy?editors=0011 by phillip_vale (@phillip_vale) on CodePen

[Multiple Icons with hover]

Hi CraigWheatley and Point C,

 

Thanks for your input! I'm going to stick with the jquery method because I have about 16 icons all up!

 

Point C thanks for you help, just one thing do you think you could explain what the (function(i, element) means? The rest i can sort of understand but i don't see what the i after the function does.

 

Thanks,

 

Phil

[Multiple Icons with hover]

Hi,

 

I am having a problem animating multiple icons with all of them hovering at once.

 

I have tried each() etc. but can't seem to crack it. Ideally I would like to have it that on hover the timeline iconHover plays and then reverses when the mouse is taken off.

 

Any help would be much appreciated,

 

Phil

See the Pen 1cf2bfa4959c1d552a02f9b101173d98 by phillip_vale (@phillip_vale) on CodePen

[Multiple Icons]

Sorry i think i fixed it.

 

My script.js was loading before my jquery. 

 

Thanks again!

[onClick and reverse]

Sorry i think i fixed it.

 

My script.js was loading before my jquery.

 

Thanks again!

[onClick and reverse]

Hi PointC!

 

Thanks for this. Works a treat!

 

Except when i try to use it in my files on my desktop it doesn't seem to want to work. This happens to me alot when i copy code from greensock and into my files.

 

Is there some structure or heirachy that i am missing?

 

I stops working when i use it in the /js/script.js file but works fine if i put it on the bottom of the home page?

 

Thanks so much,

 

Phil

[Resume a paused timeline from another timeline]

Not sure if this is nested timelines but this is what I was after if any other beginners can use it.

 

See the Pen rLVMaB?editors=0010 by phillip_vale (@phillip_vale) on CodePen