Tutorial - Creating a Slider with Interactions 2.0

Tutorials
1

An in-depth tutorial on creating a fully-featured Slider with Pinegrow Interactions, without using blueprints. Even if you’re not interested in sliders and interactions, watch this tutorial to see how Pinegrow is used to build interactive web components.

Follow this tutorial to learn how to:

  • Create Scroll scenes with snapping and pagination
  • Add smart auto play to the slider
  • Animate individual slides with Scroll scenes and custom animations
  • Work with custom selectors
  • Use data attributes in animations
  • Reuse interactions on multiple sliders and generate standalone JavaScript files
  • And more!
5 Likes
2

Hi Matjaz,
first of all: Thank you for this tutorial.
I have tried to follow it and comprehend it, but it is still not so easy for me as a beginner.

May I ask you for some help?

a)
Could you please explain how it’ll be possible to change the automatic change of the images from right to the left into a (soft) fade-in (on place)?

b)
And how is it possible do add a KenBurns effect to the images/slides?

To illustrate what I mean by both points this as example:
slimhamdi.net/salimo/demos/index-kenburns.html

Thank you very much in advance!
Aman

P.S.: I hope I have chosen the right thread for my concern.

3

Thanks @7at1blow :slight_smile:

a) that would not be a slider any more. The essence of slider are Scroll scenes that control the animation based on the scroll action.

To fade the scenes, or animate them in any different way, take a look at the Presentation blueprint:

b) animating the scale transform property would probably achieve this effect.