Watch our reveal video and work together!
What is Infinite Ideas?
Everything starts
with an idea.

We’re making exceptional mobile and web experiences.
Loved by thousands of users and customers everyday.

developer
Timothy Carter
assistant
Kayla Rose
manager
Juwan Jackson
photographer
Chloe Dalton
designer
Jessica Parker
supporter
Jimmy Hawkins

Meet the Team

Each member of our team is here not only because they're talented. But because they love what they do!

Our Services

We build exceptional brands. A full-service digital
agency approach to grow your brand online.

We combine beautiful design with innovative technology to create websites that are engaging.

Website

We develop customized mobile websites and native mobile applications for all platforms.

Application

Our ecommerce software helps manage webshops in general and specific aspects.

Ecommerce

Simple and bold design for web sites and applications, with focus on content, typo and colors.

Design

Your brand is your own story. Through brand strategy we craft experiences that help you.

Brand

We develop various high quality digital products, including web and mobile applications.

Development

Our Clients

We’ve helped clients to bring their ideas to reality.
But don’t take our word for it. Take theirs.

Dave Turner
Motivational Speaker

“These guys helped me grow my business like a boss. Everything is very professional, unlike many other solutions.”

Carrie Steiniger
Account Manager

“Choosing Infinite Ideas was the best software decision we made last year. I think it’s a long term relationship. ”

Chris Mayne
Tech Reviewer

“When I think of Infinite Ideas, I think of two things: professional solutions and outstanding customer support when I need it.”

Samantha Lewis
Eyewear Boutique Founder

“Infinite Ideas helps us to create an unique webshop that's as special as the items we sell. Excellent customer service!”

We’re a NYC based digital agency. Join us!
WE’RE HIRING!
Icon
Icon

infiniteideas

25 Monroe St
New York, NY 10002

We’re accepting new projects and would love to hear
about yours. Got a question? Drop us a mail.

25 Monroe St, NY
01755 4271 795
[email protected]
Mon - Fri / 9AM - 5PM
We'd love to
hear from you.
Arrow
Arrow
Slider

Create layer animation in Smart Slider

Everyone loves fancy transitions on their website. They help catch (and keep) the visitor’s attention for as long as possible. Thanks to the latest CSS versions and the possibilities of JavaScript (especially jQuery) creating decorative layer animation become easy. Having smooth, lightweight animations on pages have become a trend, as people tend to remember images and moving things easier. Don’t forget: a moving design element will always outperform any static one when it comes to grabbing your user’s attention.

Company

Description: Your website represents your company to millions every day. It establishes your identity to the world 365 days a year. This can be extremely useful for readers, as it provides quick information about the company, or the services behind the site.

Tags: Full width, Premium, Video, Content Slider, Layer event, Mobile Touch

Importance of the layer animations

When a button does a small animation, it makes the visitor focus on that moving element. Make some other layer do another small animation: your visitors will love it! Just don’t let the animation go too far. When each element (quickly) moves at the same time in a different way.  That might backfire: lots of moving elements (lots of things to focus on) might confuse the user, and instead of making them to stay on your page and find out your story. They’ll scroll away, or leave your site entirely. When it comes to animations, the less can be more.

In Smart Slider 3 you can animate both your text and image layers. As a matter of fact, all 15 layers can have layer animation. Sounds wonderful, doesn’t it? The easy to use animation builder comes with a great variety of settings. It can be used to create any kind of animation you can imagine. There are lots of predefined animations to choose from, if you quickly want to have an animation on your layer. The best thing is that when you are done creating a complicated animation, you can simply save it into one of the animation sets. Then can select it from the animation list later, so you don’t have to create it again.

You don’t even need to create a slider to have layer animations as they can be used on blocks, too. Take your layer animations to the next level with Smart Slider 3’s easy to use animation builder, create unique and fascinating animations choosing from the three main layer animation types offered: in, out, and loop; we are going to explore them below.

Layer animation
Layer animation interface

In layer animation

In animations usually start right after the background animations have finished, but this can be changed for each slider. These kind of animations were made to introduce the layer, for example, fading it in or moving it in from outside of the canvas.

IN layer animation
In layer animation in action

It is also possible to rotate a layer using the Special zero feature which is available for every IN layer animation. This feature will allow you to turn a horizontal layer into a vertical one when the slider loads, without a noticeable rotation effect.

Create mask for layer animation

To have an even more splendid effect, you can use the mask to make the layer animation only happen within the layer. When this option is used, the content of the layer will only appear when it reaches the original position of the layer. For example: when an area layer is used and it has a simple IN animation where only the offset was changed, the area will appear from that point where the layer should be if it didn’t have any animations on it, giving the illusion of a progress bar.

In other words, only those parts of the layer will be visible which are inside the layer’s original position. If you are familiar with Photoshop, masking is a commonly used tool there, and you can find some tutorials and quick examples on what can be achieved with masking here.

Layer animation with mask
Layer animation with mask
Layer animation without mask
Layer animation without mask

Out layer animation

They’re very much like the In animations. Usually, they play right after the in animation has finished, but they can be played right before the slide-switching, and they can be triggered by any event. The out animations are used to hide a layer on the current slide. For example, on this slider, the headphone and the text that appears first is hidden using layer animations.

Out layer animation
Out layer animation

The out animations have a special feature called Instant out which makes the out animation happens right after the in animation have finished. Both the in and out animations have a repeatable option which can be used to achieve such effects. The out animation can be skipped per slider, if you don’t want to wait for every single out animation to happen when you switch slides.

Loop layer animation

Unlike the in and out animations, the loop animation keeps repeating themselves until an out animation takes effect on the layer, or until the slide is changed. Using the Events you can put a loop animation (e.g. a pulsing effect) on your layer when the user hovers over it, and when the cursor is not above the layer anymore the animation (e.g. the pulsing effect) will stop.

Loop layer animation
Loop layer animation

If you create a call to action button and put a smooth loop animation on it it will basically scream for your user’s attention.

Chaining multiple layer animations together

Each animation type can have multiple “steps”, with different animations in them. For example, you can create an IN animation, it can fade in, move left, move right and rotate.

We made some predefined chain animations to help you have a fancy animation as fast as possible!

Timeline to adjust animation speed and position

Every layer animation appears in a visual timeline, where the delay and duration can be changed. When the animation is clicked, it will open the animation manager window and let you edit the selected animation. Pressing the space key will start the animations, so you can see a preview on how they will look.

Layer animation - timeline
Layer animation – timeline

The timeline can be used to copy animations from layer to layer.

Specify events for layer animations

There are no events without layer animation. Using events you can make layers appear and disappear on mouse over, mouse out or mouse click. If you would like to know more about the events, we wrote an article on them which you can find here.

Additional notes

While any kind of effect can be achieved using the layer animations, it is worth knowing that the parallax effect is not a layer animation, and it can’t be done with layer animations, but of course, Smart Slider 3 makes it possible to have the parallax effect on each layer.

Version Overview

Pro only
  • Layer animations (in, loop, out)
  • Animation events
  • Parallax effect
  • Timeline

Similar Sliders - Layer Animation

Museum – MainTimeline – Adjust layer animations on the flyCall to action areas on a slider – links, buttons and actionsMuseum – Visit

Related Documentation Pages