When you have single photo open and you swipe it to see the next photo or previous photo, there is an animation that shows change of one photo to another, we are referring that as swipe animation here. Swipe animations are located in root_dir > phpix-imports > animations > xyz.css where xyz.css is the animation file. Swipe animations are purely written in CSS, so its quite easy to grasp if you know css transform and transition properties very well.
How swipe screen is formed plays very important role, hence you need to understand it as well. The whole screen actually contains 3 photos(or say slides), lets name them as prev_slide, current_slide and next_slide. Every slide is 100% wide and 100% in height, of your screen area. Hence only one slide is visible on the whole screen. Look at the image below for easy understanding.
Device Screen
All the 3 slides have 3 predefined css IDs #gal-reel-prev-inner, #gal-reel-now-inner and #gal-reel-next-inner, names should be self explainatory to you. When you swipe for next photo, current_slide becomes prev_slide, next_slide becomes current_slide, a new slide is created in the place of next_slide, prev_slide is deleted. Think it like a First-in-last-out or a queue. Now you can write some css for next and prev so that they look different, but write css for current slide so that it looks normal. Rest of the code is already written for you. When swipe happens, transition happen from next slide to current slide.
Lets consider an example of zoomin animation for instance. When user slides towards prev or next slide, new slide is little smaller than normal slide and becomes bigger at the end of the animation to cover whole screen.
#gal-reel-prev-inner, #gal-reel-next-inner{
transform: scale(0.6,0.6);
}
#gal-reel-now-inner{
transform: scale(1,1);
}
The code above is complete, however if you want to customize it further, you can make use of classes called .gal-main-slide-left and .gal-main-slide-right . When user has started swiping but still have not raised the finger from screen, that state of current slide is either .gal-main-slide-left or .gal-main-slide-right depending on which direction is user is trying to swipe, towards prev or next. At any time only one of those 2 will be assigned to current slide. So you can customize your code further to get the final output.
transform: scale(0.6,0.6);
}
#gal-reel-now-inner{
transform: scale(1,1);
}
.gal-main-slide-left, .gal-main-slide-right{
transform: scale(0.8,0.8);
}
Now, you may want to see your animation. For that, save the above code in a css file. Kepp the css file in phpix-imports/animations/ directory. Now login to admin and goto options tab. You should see your animation listed there. Check the checkbox and press save changes button. Now your animation would be listed at gallery page. When giving name to a file, use small letters, numbers, hyphen, underscore and dot.
That's it friends. End of this story!