[How to make spalsh animations between internal pages?]

I would like to make a spalsh screen animation between internal pages?
I cannot even figure where to start. I tried searching the net but maybe Im searching for incorrect search terms or using wrong wording.

 

Im looking for something like this (try browsing a bit)

I'm not looking for a code just that I would appreciate help to just point me in the right direction. But also any code example is welcome.

Thanks.

[animation after click on internal link, then open url]

1 hour ago, Shaun Gorneau said:

Quote

I don't see anything that is going wrong (in CodePen) except for access restrictions when calling other domains.

 

Actually, I think Im linking to the same domain. Am i not?

 

 

[animation after click on internal link, then open url]

I'm trying to have an GSAP animation after internal link click. Like transitional splash between pages.

 

I have this script this script but for some reason when I use GSAP instead of "classic" js/jQuery transitions it never loads next page.

 

What am I doint wrong?

See the Pen ExVdMKo by drol (@drol) on CodePen

[Stagger with pause question]

I swear, cross my heart I tried repeat: 1.

thank you

[Stagger with pause question]

Thanks. I didn't even know I have the access to beta

 

Im trying to achieve for each of those white forms to dissapear after appearing before next one appears...

 

See the Pen zYOXmKr by drol (@drol) on CodePen

 

[Stagger with pause question]

Is it possible to add pause between each staggered element in stagger. Each element is supposed to appear and fade and don't appear. I want each element to fade after previous one has appeared and faded away and not to appear until whole loop starts again.

 

TweenMax.staggerFrom(".line11", 0.3, {opacity:0, ease: Expo. easeIn, yoyo:true, repeat:-1}, -0.59);

 

[Enlarge on hover, reduce on leave]

Love your explanation. thanks

[Enlarge on hover, reduce on leave]

What am I doing wrong here. On mouse  hover it should enlarge the text hovered. On mouseleave it should scale back.

See the Pen ZNmJEz by anon (@anon) on CodePen

[Difference in rendering between Chrome and Firefox]

yes it helps. Thank you a ton.

[Difference in rendering between Chrome and Firefox]

This page is rendered differently in Firefox as opposed to Chrome.

PAGE

 

Which one is correct and how to fix it?

 

 

 

[Enlarging dot on hover (beginner)]

I have a click button that after click sends calendar entry to the user.

What I'm trying to achieve is that dot in the middle scales up over letter radius on mouse hover.

 

I've tried several approachesnow but for some reason I cannot do it.

 

This is my code:

TweenMax.to(".innerletters, .outerletters, .roundbutton", 8, {opacity:1, delay:7});
TweenMax.to(".innerletters", 32, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
TweenMax.to(".outerletters", 22, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
function hoverOn () {
var ttt = new TimelineMax({repeat:-1});
ttt.to(".roundbutton", 2, {fill: '#F15D2E'})
ttt.to(".roundbutton", 2, {fill: '#EEBC27'}, "+=1")
ttt.to(".roundbutton", 2, {fill: '#8DC641'}, "+=1")
ttt.to(".roundbutton", 2, {fill: '#F15D2E'}, "+=1")
}

 

See the Pen XOzWGv by drol (@drol) on CodePen

[Trying to scale up a specific path from SVG]

Here is the mentioned codepen.

 

See the Pen xmdRWa by drol (@drol) on CodePen

 

[Trying to scale up a specific path from SVG]

I'm trying to scale up specific path from SVG graphic. It's not working so I may be missing something.

 

Path definition

<symbol id="dot"><path id="smalldot" class="cls-2" d="M104.9,36a3,3,0,1,1-3-3A3,3,0,0,1,104.9,36Z"/></symbol>

 

JS

TweenMax.to("#dot", 3, { scale: 5 });

 

 

 

 

 

[GSAP code looks OK to me, but nothing is happening in browser]

yep that works using different type of selector instead of variable. thank you.

 

[GSAP code looks OK to me, but nothing is happening in browser]

Thank you for the reply.

It works on codepen if I remove defer, yet it doesn't work on the page: http://80.240.26.71/registration/

Is it an issue of page load sequencing?

[GSAP code looks OK to me, but nothing is happening in browser]

Greetings, I'm new to greensock/js so Im looking for little assistance here. What am I doing wrong?

 

<div id="sidemenu" class="sidemenu">
<a href="#registerhere"><strong>register here</strong></a>
<hr />
<a href="#whatisincludedinthefee"><strong>what is included in the fee</strong></a>
<hr />
<a href="#onedayattendance"><strong>one-day attendance</strong></a>
<hr />
<a href="#accompanyingpersons"><strong>accompanying persons</strong></a>
</div>

 

<script>
defer(function () { });
var $sidemenu = $('#sidemenu');
TweenLite.from($sidemenu, 5, {opacity: 0, ease: Power4.easeIn});
</script>