# Animation effects with images

**URL:** <https://discourse.libcinder.org/t/animation-effects-with-images/376>\
**Category:** Uncategorized\
**Created:** [November 4, 2016, 4:29am UTC](https://discourse.libcinder.org/t/animation-effects-with-images/376 "2016-11-04T04:29:05Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Immature](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/immature/32/220_2.png) [@Immature](https://discourse.libcinder.org/u/Immature)\
**Post date:** [November 4, 2016, 4:29am UTC](https://discourse.libcinder.org/t/animation-effects-with-images/376/1 "2016-11-04T04:29:05Z")

</div>

Hi

I am trying to create different animation effects for slideshow of images.  
Have tried dealing with timeline by varying dimensions and changing dimensions over it.  
I got some good results using timeline.  
But facing difficulty while creating certain effects as timeline alone is not sufficient for that.

Below is the link

[http://wowslider.com/jquery-carousel-animated-parallax-demo.html#](http://wowslider.com/jquery-carousel-animated-parallax-demo.html#)

I am trying to create following effects  
BOOK  
DOMINO  
SLICES

I am not sure whether these can be done simply by timeline animation or I will have to take help of other things. Please suggest the suitable approach for creating these effects.

Thanks : 🙂

---

<div class="post-metadata">

**Author:** ![lithium](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/lithium/32/38_2.png) [@lithium](https://discourse.libcinder.org/u/lithium)\
**Post date:** [November 4, 2016, 4:39am UTC](https://discourse.libcinder.org/t/animation-effects-with-images/376/2 "2016-11-04T04:39:51Z")

</div>

Domino and slices could be done entirely within a shader, book probably as well, but it would be a bit more fiddly because the rotated image expands beyond the bounds of the original image. Usually you want to drive these so that you can feed a value between 0 and 1 to represent the percentage of completion. You can definitely use timeline to control that value though. Have a squizz at [http://transitions.glsl.io/gallery](http://transitions.glsl.io/gallery) to see a few examples of transitions between two images just with a shader.

---

<div class="post-metadata">

**Author:** ![Immature](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/immature/32/220_2.png) [@Immature](https://discourse.libcinder.org/u/Immature)\
**Post date:** [November 4, 2016, 6:42am UTC](https://discourse.libcinder.org/t/animation-effects-with-images/376/3 "2016-11-04T06:42:48Z")

</div>

Compiling a shader file to get glsl file is new thing for me. They have given shaders for respective animation effects. If I want to use those shaders in my code what will be the procedure? Do I have to compile them to get GLSL file?

---

<div class="post-metadata">

**Author:** ![lithium](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/lithium/32/38_2.png) [@lithium](https://discourse.libcinder.org/u/lithium)\
**Post date:** [November 4, 2016, 7:24am UTC](https://discourse.libcinder.org/t/animation-effects-with-images/376/4 "2016-11-04T07:24:22Z")

</div>

Here’s an example of porting one of their transitions to cinder, with as little modification to their shaders as possible. Unfortunately it’s friday evening here so rather than documenting this gist, i’m going to the pub, but hopefully it will be enough to get you started.

> <https://gist.github.com/lithium-snepo/bbbe96bd0b17420b193322e09f1e0c8a>

A.

---

<div class="post-metadata">

**Author:** ![Immature](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/immature/32/220_2.png) [@Immature](https://discourse.libcinder.org/u/Immature)\
**Post date:** [November 4, 2016, 8:56am UTC](https://discourse.libcinder.org/t/animation-effects-with-images/376/5 "2016-11-04T08:56:37Z")

</div>

Thank you lithium 🙂 I will try doing shaders with this as reference.

---

<div class="post-metadata">

**Author:** ![sharkbox](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/sharkbox/32/39_2.png) [@sharkbox](https://discourse.libcinder.org/u/sharkbox)\
**Post date:** [November 4, 2016, 3:57pm UTC](https://discourse.libcinder.org/t/animation-effects-with-images/376/6 "2016-11-04T15:57:42Z")

</div>

In addition to shaders you can also use one of the variations of the draw method to draw a piece of the image. Shaders will be much better with performance and while it’s good to eventually learn how to use them, there are different ways to do these effects.

```
void draw (const Texture2dRef &texture, const Area &srcArea, const Rectf &dstRect)

```

This lets you do something like this.

```
// which part of the image you want to draw    
Rectf src(0,0, myImg->getWidth() * 0.5. myImg->getHeight() * 0.5);
// where you want to draw it on screen
Rectf dest(0,0, myImg->getWidth() * 0.5. myImg->getHeight() * 0.5);
dest.offset(vec2(100,200));
gl::draw(myImg, Area(src), dest );

```

Combine this with 3d transformations and you should be able to accomplish all of these effects.

---

<div class="post-metadata">

**Author:** ![Immature](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/immature/32/220_2.png) [@Immature](https://discourse.libcinder.org/u/Immature)\
**Post date:** [November 7, 2016, 3:12am UTC](https://discourse.libcinder.org/t/animation-effects-with-images/376/7 "2016-11-07T03:12:56Z")

</div>

Hi lithium  
Tried the example you gave with inline shaders.  
After comparing I found that few modifications in the shaders code given in the link works.  
But still not comfortable with shaders and would love to have 2-3 examples for reference as you gave in previous session.  
[http://transitions.glsl.io/transition/979934722820b5e715fa](http://transitions.glsl.io/transition/979934722820b5e715fa)

I am working on above effects.  
Please help me with that

---

<div class="post-metadata">

**Author:** ![Immature](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/immature/32/220_2.png) [@Immature](https://discourse.libcinder.org/u/Immature)\
**Post date:** [November 7, 2016, 3:14am UTC](https://discourse.libcinder.org/t/animation-effects-with-images/376/8 "2016-11-07T03:14:24Z")

</div>

Thank you sharkBox…I have tried the same approach for some cases.  
Seems shaders provides impressive quality … 🙂

---

<div class="post-metadata">

**Author:** ![lithium](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/lithium/32/38_2.png) [@lithium](https://discourse.libcinder.org/u/lithium)\
**Post date:** [November 7, 2016, 3:42am UTC](https://discourse.libcinder.org/t/animation-effects-with-images/376/9 "2016-11-07T03:42:34Z")

</div>

First of all, have a read of the excellent cinder [guides](https://libcinder.org/docs/guides/opengl/part5.html) they should explain to you how shaders work, at least as it pertains to cinder. It’s probably a good idea to go and read a more general tutorial (like the one on [learnopengl.com](http://learnopengl.com)) so you understand the core OpenGL concepts and then why things are done the way they are in cinder.

If, after all that you’re still stuck, i can help you with getting that particular image transition working. 🙂

---

<div class="post-metadata">

**Author:** ![Immature](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/immature/32/220_2.png) [@Immature](https://discourse.libcinder.org/u/Immature)\
**Post date:** [November 7, 2016, 7:34am UTC](https://discourse.libcinder.org/t/animation-effects-with-images/376/10 "2016-11-07T07:34:08Z")

</div>

Actually i have worked on Openframeworks in which OpenGl was used.  
GlSl is the only new thing.  
Cinder tutorial is quite impressive.  
Just wanted to know how those shaders can be used as when tried it was giving exception of access violation.  
Better if I could get a syntax where all the frag and vert files can be used in a code.  
Hence asked for the way you used the shaders in your code.