Loading...

Search jQuery

Search

jQuery Forum

jaimmy

fullscreen.js transformation animation not working

in Using jQuery • 6 years ago

I have a page made with fullscreen.js ( copied and modified directly from author's site). However the animation technique he describes in this youTube clip doesn't work for me.

authors; clip:

https://www.youtube.com/watch?v=qiCVPpI9l3M

my page so far:

http://www.mediaflash.ca/fullPagejsJIM/examples/navigationV.html

can't figure it out any suggestions.

1

Replies(10)

jakecigar

Re: fullscreen.js transformation animation not working

6 years ago

I don’t see any CSS animation on your page. I see the body class changing for each page.

JΛ̊KE

jaimmy

Re: fullscreen.js transformation animation not working

6 years ago

I set up the animation as detailed in the YouTube video clip. I'm probably missing something relevant

IN my styles up top i have;

.section{

text-align:center;

position: relative;

}

#sweets {

position: absolute;

bottom: -100px;

left: 0;

right: 0;

margin: 0 auto;

transition: all 1.1s ease-out;

-webkit-transition: all 1.1s ease-out;

}

/*Reachin section 2*/

.fp-viewing-secondPage {

bottom: -20px;

}

/*Reachin section 3*/

.fp-viewing-3rdPage {

bottom: 0px;

}

jakecigar

Re: fullscreen.js transformation animation not working

6 years ago

To do CSS animation you need to have 1 rule that gets invoked when you change the class on the body.

Like…

#foo {
background-color:red;
-webkit-transition: all 1.1s ease-out;
transition: all 1.1s ease-out;
}
.fp-viewing-3rdPage #foo{ /* when you add fb.viewing3rdPage to the body, you get this rule on #foo*/
background-color:blue;
}

JΛ̊KE

jaimmy

Re: fullscreen.js transformation animation not working

6 years ago

Brilliant!

All I had to do was add the #sweet div id after '.fp-viewing-secondPage ' so it reads

.fp-viewing-secondPage #sweets {

bottom: 200px;

}

I added your #foo as a test as well ( might have to refresh cache to see):

http://www.mediaflash.ca/fullPagejsJIM/examples/navigationV.html

THANKS!

jakecigar

Re: fullscreen.js transformation animation not working

6 years ago

Sweet! You are now ready to do some wild stuff.

I should warn you that using all in a transition is not a good idea. It’s better to specify exactly what you want animated.

JΛ̊KE

jaimmy

Re: fullscreen.js transformation animation not working

6 years ago

something like:

transform: translateY(200px);

or similar. I'll figure it out

jakecigar

Re: fullscreen.js transformation animation not working

6 years ago

This was about transitions, not transforms. While they are similar, they are a different.

I meant…

background-color :red;
-webkit-transition: background-color 1.1s ease-out;

Since you are learning, there is a great plugin that can do CSS transitions and transforms for you with jQuery.

Transit - CSS transitions and transformations for jQuery

JΛ̊KE

jaimmy

Re: fullscreen.js transformation animation not working

6 years ago

Those tutorials are great. bookmarked!

however they seem to all be jQuery commands. not sure how to implement them with the fullscreen.js method.

I also tested this method which works quite well

#sweets {

position: absolute;

bottom: -286px;

left: 0;

right: 0;

margin: 0 auto;

-webkit-transition: all 1s ease-out;

-moz-transition: all 1s ease-out;

-o-transition: all 1s ease-out;

}

AND THEN:

.fp-viewing-secondPage #sweets {

transform: translate(0,-350px);

-webkit-transform: translate(0,-350px);

-o-transform: translate(0,-350px);

-moz-transform: translate(0,-350px);

}

jakecigar

Re: fullscreen.js transformation animation not working

6 years ago

That plugin is for another project in your future. It bridges CSS3 and jQuery, so you don’t use jQuery animate as much anymore.

Your CSS looks good, except the order is wrong.

-webkit-transform: translate(0,-350px);
-o-transform: translate(0,-350px);
-moz-transform: translate(0,-350px);
transform: translate(0,-350px);

JΛ̊KE

jaimmy

Re: fullscreen.js transformation animation not working

6 years ago

perfect

thanks, calling it a day

see you!