Questions: error css animation + scroll to top action

Freeway
1

Hello everybody. I am still testing css animations and came across two errors/questions:

LINK TO TESTPAGE

On my test page one I use a „slide down” animation of a picture.
I have inserted the code before and gave the photo a class named „slideDown“ via the extended dialog ( ) So far it works fine.

Additionally I like to use the „scroll to top“ action from Tim, which I really love for responsive webpages. The scroll to top button is revealed after 100 px of scrolling down in the browser window.

In combination of both there is a short flicker of the scroll to top button during the animation /when the page loads. (Without the animation the „scroll to top button“ works like a charm and will only revealed when scrolling down.) Can I solve this? Or do I have to accept that the codes interfere with each other?

In the second test page (test two), I do have the same code as above, but like to let the same photo, which is now placed at the bottom the page, displayed when scrolling down.

(Like items on CSS3 Animation Cheat Sheet - Justin Aguilar)

I use the following code, but maybe I have missed something basic?

THE MANUAL SAYS

Add jQuery to the element of your webpage:

Add this before the tag to trigger the animation when the user scrolls to the element:

Replace #animatedElement with the ID or class (which I did with #photo) of the element you want animated.
Replace slideUp with an animation class.

Can someone from the css pros perhaps help me out?

That would be fantastic.
Hanna

Animation cheat sheet: CSS3 Animation Cheat Sheet - Justin Aguilar

Css: CSS3 Animation Cheat Sheet - Justin Aguilar

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

2

Add jQuery to the element of your webpage:

Mixed Content: The page at 'https://dl.dropboxusercontent.com/u/8974766/Testpage/testtwo.html' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.10.1.min.js'. This request has been blocked; the content must be served over HTTPS.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

What appears to be happening here is that the image is getting animated using a CSS transform which positions it at 100% above the height of the page. This causes the height of the page to effectively double which, in turn, causes the JavaScript that shows the scroll to top button to display it since it thinks you’ve scrolled down passed your 100px initial value.

The workaround I have for you is a little clunky but involves adding the following HTML to the head of your page (Page > HTML Markup > Before );

<style type="text/css">
	.sstt.is-hidden { display:none }
	.sstt.is-visible { display:block }
</style>

The downside is that the button is displayed instantly when you scroll down the page rather than fading in over 0.7 seconds as before.

An alternative solution would be to choose a fade effect for the image or one that animates the item over the x axis.
Regards,
Tim.

On 1 Mar 2016, at 17:47, sonjanna email@hidden wrote:

Additionally I like to use the „scroll to top“ action from Tim, which I really love for responsive webpages. The scroll to top button is revealed after 100 px of scrolling down in the browser window.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

The downside is that the button is displayed instantly…

Could you instead use something like

    .sstt.is-hidden { 
		visibility: hidden;
		opacity: 0;
		}
    .sstt.is-visible {
		visibility: visible;
		opacity: 1;
		transition: visibility 0s, opacity 0.7s linear;
		}

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

Good morning. Thank you Tim and David very much to check my test pages.

Your code Tim works, the “slideDown” animation does not trigger the appearance of the button now. But with the downside of non-fading of the button.

Animations like slide-in-right over the x axis make the same error by the way.

Your code David did not work I am afraid.

For the other subject to trigger the animation (test two) only when the item comes in sight when scrolling down, it does not work on non dropbox URL either. I have tested it this morning.

Lieben Gruß, Hanna

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

Your code David did not work I am afraid.

Dependant on browser you will need the the specific browser prefixes for transition ie

-webkit-transition: visibility 0s, opacity 0.7s linear;
-moz-transition: visibility 0s, opacity 0.7s linear;
-o-transition: visibility 0s, opacity 0.7s linear;
transition: visibility 0s, opacity 0.7s linear;

it does not work on non dropbox URL either.

Post a link to that one

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

7

Or, use this: http://www.scrolltotop.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

8

*Jef, thank you, but Tim`s action is my absolute favorite :slight_smile:

  • David, I will try the last code as soon as possible….

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

9

*David

Please see<a href=„https://dl.dropboxusercontent.com/u/8974766/Testpage/testoneB.html https://dl.dropboxusercontent.com/u/8974766/Testpage/testoneB.html" target="_blank">LINK FOR DAVID for the flicker of the button.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

10

Sonjanna,
Can you tell me what are your settings for the Scroll to Top Action?

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

11

Sure Billy, these are standard settings I suppose. I only changed the „Hide below“ to 0, because I like to let it stay visible in mobiles. Please see screenshot.
Which from my questions do you have in mind? I happily test other settings when it helps.

Hanna

https://dl.dropboxusercontent.com/u/8974766/Bildschirmfoto%202016-03-02%20um%2014.33.03.JPG

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

12

On 2 Mar 2016, 9:10 am, Jef wrote:

Or, use this: http://www.scrolltotop.com

Perfect.
Thanx Jef.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

13

Turns out I had an old version of the Scroll to Top Action.

Thank you for your response.

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options