<p dir="auto">When the animation is done between placeholder and new image then the placeholder is stretched during the animation. Please do only the fade animation without modifying the imagesize.</p>
<p dir="auto"><strong>Glide Version/Integration library (if any)</strong>: 3.5.2<br>
<strong>Device/Android Version</strong>: S4/4.4<br>
<strong>Issue details/Repro steps</strong>: Load a different sized thumbnail and image, or placeholder and image and note the result:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2906988/6538023/e027582a-c45c-11e4-8758-abb9d7a67c69.gif"><img src="https://cloud.githubusercontent.com/assets/2906988/6538023/e027582a-c45c-11e4-8758-abb9d7a67c69.gif" alt="demo" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Glide load line</strong>:</p>
<div class="highlight highlight-source-java notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Delay extends UnitTransformation {
    private final int sleepTime;
    public Delay(int sleepTime) { this.sleepTime = sleepTime; }
    @Override public Resource transform(Resource resource, int outWidth, int outHeight) {
        try { Thread.sleep(sleepTime); } catch (InterruptedException ex) {}
        return super.transform(resource, outWidth, outHeight);
    }
}

@Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    final ImageView image = new ImageView(this);
    setContentView(image);

    // Saved as R.drawable.placeholder
    String placeholder = &quot;http://placehold.it/300x500/eedddd.png&amp;text=PLACEHOLDER&quot;;
    // Square image
    String thumb = &quot;http://placehold.it/300x300/eeeedd.png&amp;text=THUMB&quot;;
    // Wide image
    final String full = &quot;http://placehold.it/300x100/eedddd.png&amp;text=FULL&quot;;
    // Prepared request with unimportant clutter
    final DrawableRequestBuilder&lt;String&gt; req = Glide
            .with(this)
            .fromString()
            .diskCacheStrategy(DiskCacheStrategy.SOURCE) // disable network delay for demo
            .skipMemoryCache(true) // make sure transform runs for demo
            .crossFade(2000) // default, just stretch time for noticability
    ;

    req.clone()
        .thumbnail(req.clone()
                    .transform(new Delay(500)) // wait a little
                    .load(thumb)
        )
        .transform(new Delay(1000)) // wait before going from thumbnail to image
        //.dontAnimate() // solves the problem
        .load(full)
        .into(image);

    image.setOnClickListener(new OnClickListener() {
        @Override public void onClick(View v) {
            req.clone()
                .load(full)
                .placeholder(R.drawable.placeholder)
                .transform(new Delay(1000))
                //.animate(R.anim.abc_fade_in) // also solves the problem
                .into(image);
        }
    });"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">Delay</span> <span class="pl-k">extends</span> <span class="pl-smi">UnitTransformation</span> {
    <span class="pl-k">private</span> <span class="pl-k">final</span> <span class="pl-smi">int</span> <span class="pl-s1">sleepTime</span>;
    <span class="pl-k">public</span> <span class="pl-smi">Delay</span>(<span class="pl-smi">int</span> <span class="pl-s1">sleepTime</span>) { <span class="pl-smi">this</span>.<span class="pl-s1">sleepTime</span> = <span class="pl-s1">sleepTime</span>; }
    <span class="pl-c1">@</span><span class="pl-c1">Override</span> <span class="pl-k">public</span> <span class="pl-smi">Resource</span> <span class="pl-en">transform</span>(<span class="pl-smi">Resource</span> <span class="pl-s1">resource</span>, <span class="pl-smi">int</span> <span class="pl-s1">outWidth</span>, <span class="pl-smi">int</span> <span class="pl-s1">outHeight</span>) {
        <span class="pl-k">try</span> { <span class="pl-smi">Thread</span>.<span class="pl-en">sleep</span>(<span class="pl-s1">sleepTime</span>); } <span class="pl-k">catch</span> (<span class="pl-smi">InterruptedException</span> <span class="pl-s1">ex</span>) {}
        <span class="pl-k">return</span> <span class="pl-en">super</span>.<span class="pl-en">transform</span>(<span class="pl-s1">resource</span>, <span class="pl-s1">outWidth</span>, <span class="pl-s1">outHeight</span>);
    }
}

<span class="pl-c1">@</span><span class="pl-c1">Override</span> <span class="pl-k">protected</span> <span class="pl-smi">void</span> <span class="pl-s1">onCreate</span>(<span class="pl-smi">Bundle</span> <span class="pl-s1">savedInstanceState</span>) {
    <span class="pl-en">super</span>.<span class="pl-en">onCreate</span>(<span class="pl-s1">savedInstanceState</span>);
    <span class="pl-k">final</span> <span class="pl-smi">ImageView</span> <span class="pl-s1">image</span> = <span class="pl-k">new</span> <span class="pl-smi">ImageView</span>(<span class="pl-smi">this</span>);
    <span class="pl-en">setContentView</span>(<span class="pl-s1">image</span>);

    <span class="pl-c">// Saved as R.drawable.placeholder</span>
    <span class="pl-smi">String</span> <span class="pl-s1">placeholder</span> = <span class="pl-s">"http://placehold.it/300x500/eedddd.png&amp;text=PLACEHOLDER"</span>;
    <span class="pl-c">// Square image</span>
    <span class="pl-smi">String</span> <span class="pl-s1">thumb</span> = <span class="pl-s">"http://placehold.it/300x300/eeeedd.png&amp;text=THUMB"</span>;
    <span class="pl-c">// Wide image</span>
    <span class="pl-k">final</span> <span class="pl-smi">String</span> <span class="pl-s1">full</span> = <span class="pl-s">"http://placehold.it/300x100/eedddd.png&amp;text=FULL"</span>;
    <span class="pl-c">// Prepared request with unimportant clutter</span>
    <span class="pl-k">final</span> <span class="pl-smi">DrawableRequestBuilder</span>&lt;<span class="pl-smi">String</span>&gt; <span class="pl-s1">req</span> = <span class="pl-smi">Glide</span>
            .<span class="pl-en">with</span>(<span class="pl-smi">this</span>)
            .<span class="pl-en">fromString</span>()
            .<span class="pl-en">diskCacheStrategy</span>(<span class="pl-smi">DiskCacheStrategy</span>.<span class="pl-c1">SOURCE</span>) <span class="pl-c">// disable network delay for demo</span>
            .<span class="pl-en">skipMemoryCache</span>(<span class="pl-c1">true</span>) <span class="pl-c">// make sure transform runs for demo</span>
            .<span class="pl-en">crossFade</span>(<span class="pl-c1">2000</span>) <span class="pl-c">// default, just stretch time for noticability</span>
    ;

    <span class="pl-s1">req</span>.<span class="pl-en">clone</span>()
        .<span class="pl-en">thumbnail</span>(<span class="pl-s1">req</span>.<span class="pl-en">clone</span>()
                    .<span class="pl-en">transform</span>(<span class="pl-k">new</span> <span class="pl-smi">Delay</span>(<span class="pl-c1">500</span>)) <span class="pl-c">// wait a little</span>
                    .<span class="pl-en">load</span>(<span class="pl-s1">thumb</span>)
        )
        .<span class="pl-en">transform</span>(<span class="pl-k">new</span> <span class="pl-smi">Delay</span>(<span class="pl-c1">1000</span>)) <span class="pl-c">// wait before going from thumbnail to image</span>
        <span class="pl-c">//.dontAnimate() // solves the problem</span>
        .<span class="pl-en">load</span>(<span class="pl-s1">full</span>)
        .<span class="pl-en">into</span>(<span class="pl-s1">image</span>);

    <span class="pl-s1">image</span>.<span class="pl-en">setOnClickListener</span>(<span class="pl-k">new</span> <span class="pl-smi">OnClickListener</span>() {
        <span class="pl-c1">@</span><span class="pl-c1">Override</span> <span class="pl-k">public</span> <span class="pl-smi">void</span> <span class="pl-en">onClick</span>(<span class="pl-smi">View</span> <span class="pl-s1">v</span>) {
            <span class="pl-s1">req</span>.<span class="pl-en">clone</span>()
                .<span class="pl-en">load</span>(<span class="pl-s1">full</span>)
                .<span class="pl-en">placeholder</span>(<span class="pl-smi">R</span>.<span class="pl-s1">drawable</span>.<span class="pl-s1">placeholder</span>)
                .<span class="pl-en">transform</span>(<span class="pl-k">new</span> <span class="pl-smi">Delay</span>(<span class="pl-c1">1000</span>))
                <span class="pl-c">//.animate(R.anim.abc_fade_in) // also solves the problem</span>
                .<span class="pl-en">into</span>(<span class="pl-s1">image</span>);
        }
    });</pre></div>
<p dir="auto">By removing all the delaying parts, the end result is better, but the now the thumbnail is messed up:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2906988/6538022/e0252d02-c45c-11e4-82a6-6f13f3a215af.gif"><img src="https://cloud.githubusercontent.com/assets/2906988/6538022/e0252d02-c45c-11e4-82a6-6f13f3a215af.gif" alt="demo3" data-animated-image="" style="max-width: 100%;"></a></p>