How do I animate URL transitions? - javascript

I am trying to create a site that animates page transitions instead of just loading the next page. I found a great example at jetlag.photos (feel free to check that out). Their animations work flawlessly on the desktop and mobile. I know they used the GreenSock library to help with this but I do not see much in the way of URL transitions in the documentation. Please help!

Related

SVG animation scrolling on single page website

How can I achieve SVG animation scrolling in a single page website. I would like to make something like these websites https://onedesigncompany.com/approach and http://www.happyapps.io/. I like the first one more because the scrollup and scrolldown controls the animation.
I don't have any of my SVG code yet . trying to figure out how to get this pipeline workflow animation on scroll. I am using simple bootstrap starter template.
Need your suggestions
Thanks
Try http://greensock.com/svg-tips
Greenstock is spezialized in animations, used for banners etc. Definityl a good resource for animations in general.
However animations are not easy and require a lot of work to get them right! Agreed to close this because the topic is way to large for an answer, it's more a study :D

How to make animated header to show in mobile phones and tablets?

I have a problem with the view on mobile phone and tablets, i want the banner to show animation in mobile phones, i know that flash won't work for that for sure, so what alternative is there to make this possible, and maybe long so i think GIF also won't work.
any ideas?
Thanks all in advance!
Another great option for mobile and desktop alike is the WOW slider, which is a jquery plugin you can add to a page pretty simply:
http://wowslider.com/
If you have a specific question on how to implement a slideshow, post back for more help.
You can animate a banner using normal UIImageView animation methods, cocos2d or HTML5. You can also use CoreAnimation. If you want to understand how to animate it, do add some details to the question.
Use ImageView and Split the gif file into several parts and then apply animation to it or refer this
Through the use of the jQuery framework, you should be able to google and find various plug-ins that can help animate your header, even on mobile devices. If you learn the jQuery API, you can also animate most HTML element blocks on both desktop and mobile device platforms.

Cross Slide plugin

I used the Ken Burns effect by the code seen on the click to go to site
It is working now. But it is not much quality as you can see on this website too.
It is not smooth and looks bit vibrating.
Can anyone tell me a way to smooth this animation like we can see on Visual Slideshow software??
Thanks!!
Here's an article that details rolling your own: http://jqueryfordesigners.com/image-cross-fade-transition/
It also includes a link to download the plug-in that they detail.

How do I make the javascript more fluid? it seems to lag when two things are happening at once

I have created this website but noticed the javascript image slider seems to lag the menu pointer when a image transition is happening..
Anyone got any tips for optimization or ideas on how I could resolve this issue?
Thanks!
Website: http://roseground.co.uk/index.html
edit: P.S I have used nivoslider :)
This answer doesn't address speeding up the JS on the site, but it will address helping the site load faster, which is part of the concern.
I watched you page load, and it made multiple downloads for multiple images. If you visit spriteme.org, you can use their bookmarklet to make a single sprite for your site. Having to download one image is much quicker than downloading many images. Check it out. It will help your site.
See: http://api.jquery.com/stop/
I don't have time to look into your script but you will need to put a .stop(true,true) to stop the previous animation

vertical scroll - jquery alternative to flash

anyone know a plug in that can make a similar thing that is showed is the second example - (JC Play List Minimal Skin)
http://www.jumpeyecomponents.com/Flash-Components/User-Interface/JC-Play-List-285/examples.htm
only the scroll, not the background image
i have some problems with flash :)
thanks!
How about the HoverScroll jQuery Plugin? There's also this plugin, which isn't exactly the same as the Flash example.

Categories